《Web前端开发》第8章 响应式布局.pptx

;在网页设计的早期，页面是针对固定宽度屏幕尺寸构建的。随着终端设备的多样化发展，不同尺寸的屏幕越来越多，响应式布局的概念出现了。响应式布局是指网页布局不是固定的，而是根据不同终端设备或者不同浏览器窗口大小而呈现出不同的布局。响应式布局不仅指整个页面，也可以是页面的一部分。;8.1媒体查询;8.1.1媒体类型

媒体类型是指设备类型，常用有如下几种。

（1）all：所有类型设备。

（2）screen：计算机屏幕、平板电脑、智能手机等。

（3）print：打印机和打印预览。

例如，分别设置屏幕设备和打印机的显示样式，屏幕设备上h1标题显示蓝色，屏幕设备或者打印机上段落文字加粗显示，代码如下。;8.1.2媒体特征

1.视口

媒体特征中涉及到两类尺寸，被称为视口（viewport）：一类是设备视口，一类是布局视口。如图8-1所示，设备视口宽度device-width是设备本身的宽度，而布局视口的宽度width是页面的宽度。

可以应用meta元素对响应式布局视口作出规定，代码如下。

metaname=viewportcontent=width=device-width,initial-scale=1

（1）width=device-width表示布局视口宽度要与设备视口宽度缩放到一致。

（2）initial-scale=1表示页面最初加载时的缩放比例，即device-width/width。

（3）initial-scale和width可以只设置其中一个，另一个会被推算出来；如果initial-scale和width同时设置，会取计算后大的那一个，保证页面宽度刚好容纳进设备视口。;设备视口宽度有如下几种分类，如表8-1所示;2.vw、vh、vmin、vmax相对单位

（1）vw（ViewportWidth）：1vw等于视口宽度的1%。

例如：视口宽度为1200px，则1vw是12px。

（2）vh（ViewportHeight）：1vh等于视口高度的1%。

例如：视口高度为900px，则1vh是9px。

（3）vmin：视口宽度或高度中较小值的1%。

（4）vmax：视口宽度或高度中较大值的1%。

例如：视口宽度1200px高度900px，vmin是9px，vmax是12px。;3.max-width、min-width属性

媒体特征可以用于对媒体的宽高等方面的逻辑判断，满足条件时才呈现特定的样式。

（1）max-width

max-width是指小于或等于指定的宽度时，样式生效。当PC端优先，适配移动端时使用max-width。例如，如下代码可以在屏幕设备的视口宽度小??等于480px时，不显示产品推荐区域。

@mediascreenand(max-width:480px){

.recommend-div{

display:none;

}

};（2）min-width：大于或等于指定的宽度时，样式生效。当移动端优先，适配PC端时使用min-width。

8.1.3复杂媒体查询

可以应用and、not等逻辑运算符或者逗号连接多个条件从而创建复杂查询。

（1）and运算符

可以使用and运算符连接多个媒体特征，表示同时满足若干条件时样式生效。例如，当屏幕宽度在500px至800px之间时，body的背景色渲染为绿色，代码如下。

@mediascreenand(min-width:500px)and(max-width:800px){

body{

background-color:#cf9;

}

}

;8.1.3复杂媒体查询

（2）not运算符

not运算符用于对一条媒体查询的结果进行取反，注意not将用于否定整个查询，而不能单独应用于一个独立的查询。例如，除打印设备和设备宽度小于等于1200px的所有其他设备将被应用该样式，代码如下。

@medianotprintand(max-width:1200px){CSS样式设定}

（3）逗号

逗号分隔多个媒体查询条件时，相当于or，表示满足其中任意一个条件都会应用对应的样式。例如，屏幕设备宽度大于等于500px或者打印设备上应用该样式，代码如下。

@mediascreenand(min-width:500px),print{CSS样式设定}

;8.1.4.link方式添加媒体查询方式

可以使用link标签的media属性完成特定样式的呈现，例如下面代码可以在宽度小于等于800px时应用middle.css样式。

linkrel=stylesheetmedia=(max-width:800px)href=middle.css/;8.2综合案例;8.2综合案例