现代殡葬技术与管理专业群课程主题响应式设计基础.pptx

;响应式设计概述;前面讲解了如何使用HTML5、CSS3和JavaScript来制作网页。

在HTML5和CSS3的知识基础上，讲解一种新型的网页设计理念——响应式Web设计。响应式网站可以针对不同的终端显示出合理的页面，实现一次开发，多处适用。

响应式Web设计之所以称之为新理念，是因为响应式不仅是一种跨终端的网页开发技术，它还颠覆了之前的网页设计思想。

;响应式Web设计需要考虑页面在PC端和移动端设备上的呈现效果；移动端页面的显示效果与移动端设备的视口有关。

本节主要讲解响应式Web设计基础内容，包括视口、媒体查询，为实现响应式页面打下基础。;视口：由苹果公司为了让iPhone的小屏幕尽可能完整显示整个网页；

视口的作用：不管网页原始的分辨率尺寸有多大，都能将其缩小显示在终端浏览器上；

移动端三种视口：布局视口、视觉视口和理想视口。;（01）布局视口

布局视口（也叫视窗视口）：指浏览器绘制网页的视口，一般移动端浏览器都默认设置了布局视口的宽度。

布局视口存在的问题：当移动端浏览器展示PC端网页内容时，由于移动端设备屏幕比较小，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。;布局视口;视觉视口;理想视口;（04）设置视口：

HTML5中，将meta标签中的name属性设为viewport，即可设置视口。示例语法：

metaname=viewportcontent=user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0

;（05）视口的属性

height：视口的高度；

width：视口的宽度；

device-height：设备屏幕的输出高度；

device-width：设备屏幕的输出宽度；

initial-scale：初始比例，页面加载时的默认比例1.0；

;（01）媒体查询由媒体类型和条件表达式组成

示例语法

style

@mediascreenand(max-width:960px){

/*样式设置*/

}

/style

;设备划分;（03）示例6-1

使用媒体查询实现网页背景颜色在不同屏幕尺寸的切换，在chapter06目录下新建demo6-1.html文件。;/*剩余代码*/???

?/*?小屏幕（大于等于576px）?*/

????@media?screen?and?(min-width:?576px)?{

??????body?{background-color:?yellow;?}

????}

????/*?中等屏幕（大于等于768px）?*/

????@media?screen?and?(min-width:?768px)?{

??????body?{?background-color:?grey;}

????};????/*?大屏幕（大于等于992px）?*/

????@media?screen?and?(min-width:?992px)?{

??????body?{?background-color:?pink;?}

????}

????/*?超大屏幕（大于等于1200px）?*/

????@media?screen?and?(min-width:?1200px)?{

??????body?{?background-color:?yellowgreen;}

????};超小屏幕;