第2讲 响应式Web设计媒体查询

1、响应式web设计,css媒体查询,1、css3媒体查询 计算当前浏览器环境的某些方面（如窗口宽度、长宽比和方向等），来确定应用哪个css。 2、流式网格布局 对页面布局元素使用相对css比例而不是绝对大小。 3、流式图像和媒体 通过使用一些css技巧，使图像和媒体比例适应其浏览器的大小约束。,响应式web设计,语法结构及用法 媒体查询有两种使用方式， 一种是在css样式中内嵌“media”，在同一个css中通过不同窗口编写不同的样式去选择。 另一种是使用外部样式表的引用， 在import和link中使用“media”，根据不同的窗口大小选择对应的样式文件。这两种方式的使用方法是一样的。medi

2、a queries的使用方法如下所示： media 设备类型 only (选取条件) not (选取条件) and (设备特性) 样式代码 ,在样式表中内嵌media的代码示例如下所示： media (min-device-width:1024px) and (max-width:989px), (max-device-width:480px) and (orientation:landscape), (min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) 样式代码 简写： media

3、screen and (max-width:640px) 样式代码 在上面的示例代码中，设置了电脑显示器分辨率（宽度）大于或等于1024px（并且最大可见宽度为989px）；屏宽在480px以及横向（即480尺寸平行于地面）放置的手持设备；屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。从上面的例子可以看出，字符间以空格相连，选取条件包含在小括号内，样式代码为兼容设置的样式表，包含在中括号里面。only（限定某种设备，可省略），and（逻辑与），not（排除某种设备）为逻辑关键字，多种设备用逗号分隔，这一点继承了css基本语法。,可用的设备类型 在css中嵌入“media

4、”的方式， 开头必须书写“media”,然后指定设备类型（上例使用screen代表电脑显示器）。css中定义了10种设备类型,可用的设备特性参数 通过设备类型可以区分使用的设备，再通过设备特性参数来设置同一设备的不同型号。例如，通过设备类型指定电脑显示器， 再通过设备特性参数指用多大屏幕的显示器。设备特性的书写方式与样式的书写方式很相似， 分为两个部分，当中由冒号分割， 冒号前书写设备的某种特性， 冒号后书写该特性的具体值。例如“(min-width:320px)”。css中的设置特性共有13种， 是一个类似于css属性的集合。但与css属性不同的是，大部分设备特性的指定接受min/max的前

5、缀， 用来表示大于等于或小于等于的逻辑，以此避免使用“”这些字符。对于这13种设备特性参数的说明如表：,可以使用and关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式， 例如以下语句指定了当设备窗口宽度小于640px时所使用的样式： media screen and (max-width: 640px) 样式代码 可以使用多条语句来将同一个样式应用于不同的设备类型和设备特性中， 指定方式类似如下所示： media handheld and (min-width:360px), screen and (max-width: 480px) 样式代码 ,可以在表达式中加上not关键

6、字或only关键字， not关键字表示对后面的表达式执行取反操作， 书写方法类似如下所示： /* 样式代码将被使用在除便携设备之外的其他设备或非彩色便携设备中 */ media not handheld and (color) 样式代码 /* 样式代码将被使用在非彩色设备中 */ media all and (not color) 样式代码 使用only关键字的作用是让那些不支持media queries但是能够读取media type的设备的浏览器将表达式的样式隐藏起来。 例如： media only screen and (color) 样式代码 上面的语句对于支持media querie

7、s的设备来说，将能够正确应用样式， 就像only不存在一样。对于不支持media queries但能够读取media type的设备（例如ie8只支持“media screen”）来说， 由于先读到的是only而不是screen, 将忽略这个样式。对于不支持media queries的浏览器（例如ie8之前的浏览器）来说， 无论是否有only, 都将忽略这个样式。,简单示例介绍,先通过一个响应式布局实例，来了解一个响应式布局和media queries的简单应用。 在本例中，使用html5的结构元素定义5个盒子。当浏览器窗口尺寸不同时，页面会根据当前窗口的大小选择使用不同的样式。,主断点,主断

8、点,主断点,320px,720px,1024px,次断点 768px,iphone android,手机横 屏,ipad及某 些android,平板电脑 横屏,样式微调 次断点 次断点 480px 640px,当窗口宽度在1000px以上时， 页头和页脚分别在页面的最上方和最下方整行显示，中间主体分为三列显示。 当窗口宽度在640px以上、1000px以下时, 中间的第三列隐藏。 而当窗口宽度在640px以下时，5个区块从上往下排列显示。 在各自不同窗口大小的子样式区域中，可以继承全局的样式， 只要重新设置的需要改变的样式即可。另外，有一些次要的区块内容为了页面摆放合适，可以隐藏它。,窗口宽度

9、在1000px以上时的页面显示,窗口宽度在640px以上，1000px以下时的页面显示,在640px以下的页面显示,在移动设备上设置原始大小显示,视 口（viewport）,视口（viewport）在桌面浏览器中，等于浏览器 窗口。视口中的像素指css像素，视口大小决定页 面布局的可用宽度。,视口 = 窗口,移动设备如果同样以浏览器（即设备屏幕）窗口作为视口，那已有 的960像素宽的页面布局就会显示成这样。为此，移动浏览器定义了 两个视口： 可见视口和布局视口。,可见视口,布局视口,大多数移动浏览器 默认把布局视口的 宽度设为：980px （ie10默认设定为,1024px）,然后，尽可能 放大可见视口， （布局视口宽度保 持不变）以便在屏 幕中显示完整的网 站。,所以即使在页面中已经写好了页面在小尺寸窗口中运行的样式，移动设备上的浏览器也不会使用这个样式， 而是选择窗口宽度为980px时所使用的样式。 所以我们需要在移动设备上设置原始大小显示和是否缩放的声明。是在页面的头部之间加上下面这样的语句 或 ,meta 标签的viewport属性是在移动设备上设置原始大小显示和是否缩放的声明。可以使用的参数设置如下 width ： viewport的