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

视口（viewport）在桌面浏览器中，等于浏览器 窗口。视口中的像素指CSS像素，视口大小决定页 面布局的可用宽度。 视口 = 窗口 移动设备如果同样以浏览器（即设备屏幕）窗口作为视口，那已有 的960像素宽的页面布局就会显示成这样。为此，移动浏览器定义了 两个视口： ①可见视口和②布局视口。 ①可见视口 ②布局视口 大多数移动浏览器 默认把布局视口的 宽度设为：980px （IE10默认设定为 1024px）…… ……然后，尽可能 放大可见视口， （布局视口宽度保 持不变）以便在屏 幕中显示完整的网 站。 所以即使在页面中已经写好了页面在小尺寸窗口中运行的样式，移动设备上的浏览器也不会使用这个样式， 而是选择窗口宽度为980px时所使用的样式。 所以我们需要在移动设备上设置原始大小显示和是否缩放的声明。是在页面的头部head/head之间加上下面这样的语句∶ ? meta name=viewport content=width=device-width; initial-scale=1.0 / 或 meta name=viewport content=width=600px / meta 标签的viewport属性是在移动设备上设置原始大小显示和是否缩放的声明。可以使用的参数设置如下∶ width ： viewport的宽度 height ： viewport的高度 initial-scale ： 初始的缩放比例 minimum-scale ： 允许用户缩放到的最小比例 maximum-scale ： 允许用户缩放到的最大比例 user-scalable ： 用户是否可以手动缩放 ? 响应式Web设计 1、CSS3媒体查询 计算当前浏览器环境的某些方面（如窗口宽度、长宽比和方向等），来确定应用哪个CSS。 2、流式网格布局 对页面布局元素使用相对CSS比例而不是绝对大小。 3、流式图像和媒体 通过使用一些CSS技巧，使图像和媒体比例适应其浏览器的大小约束。 通过不同的媒体类型和条件定义样式表规则，媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。 媒体查询能够获取的值如下： 设备的宽和高device-width，device-heigth。 渲染窗口的宽和高width，heigth。 设备的手持方向，横向还是竖向orientation(portrait|lanscape) 等。 画面比例aspect-ratio点阵打印机等。 设备比例device-aspect-ratio-点阵打印机等。 对象颜色或颜色列表color，color-index显示屏幕。 设备的分辨率resolution。 语法结构及用法 ? 媒体查询有两种使用方式， 一种是在CSS样式中内嵌“@media”，在同一个CSS中通过不同窗口编写不同的样式去选择。 另一种是使用外部样式表的引用， 在@import和link中使用“@media”，根据不同的窗口大小选择对应的样式文件。这两种方式的使用方法是一样的。Media 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 screen and (max-width:640px) { 样式代码 } 在上面的示例代码中，设置了电脑显示器分辨率（宽度）大于或等于1024px（并且最大可见宽度为989px）；屏宽在480px以及横向（即480尺寸平行于地面）放置的手持设备；屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。从上面的例子可以看出，字符间以空格相连，选取条件包含在小括号内，样式代码为兼容设置的样式表，包含在中括号里面。only（限定某种设备，可省略），and（逻辑与），not（排除某种设备）为逻辑关键字，多种设备用逗号分隔，这一点继承了css基本语法。 ? 在CSS3中的Media Queries模块中支持对外部样式表的