响应式Web设计-媒体查询.ppt

《响应式Web设计-媒体查询.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、响应式Web设计CSS媒体查询1、CSS3媒体查询计算当前浏览器环境的某些方面（如窗口宽度、长宽比和方向等），来确定应用哪个CSS。2、流式网格布局对页面布局元素使用相对CSS比例而不是绝对大小。3、流式图像和媒体通过使用一些CSS技巧，使图像和媒体比例适应其浏览器的大小约束。响应式Web设计通过不同的媒体类型和条件定义样式表规则，媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。媒体查询能够获取的值如下：设备的宽和高d

2、evice-width，device-heigth。渲染窗口的宽和高width，heigth。设备的手持方向，横向还是竖向orientation(portrait

3、lanscape)等。画面比例aspect-ratio点阵打印机等。设备比例device-aspect-ratio-点阵打印机等。对象颜色或颜色列表color，color-index显示屏幕。设备的分辨率resolution。语法结构及用法媒体查询有两种使用方式，一种是在CSS样式中内嵌“@media”，在同一个CSS中通过不同窗口编写不同的样式去选择。另一种是使用外部样式表

4、的引用，在@import和link中使用“@media”，根据不同的窗口大小选择对应的样式文件。这两种方式的使用方法是一样的。MediaQueries的使用方法如下所示：@media设备类型only(选取条件)not(选取条件)and(设备特性){样式代码}在样式表中内嵌@media的代码示例如下所示：@media(min-device-width:1024px)and(max-width:989px),(max-device-width:480px)and(orientation:landscape),(min-device-widt

5、h:480px)and(max-device-width:1024px)and(orientation:portrait){样式代码}简写：@mediascreenand(max-width:640px){样式代码}在上面的示例代码中，设置了电脑显示器分辨率（宽度）大于或等于1024px（并且最大可见宽度为989px）；屏宽在480px以及横向（即480尺寸平行于地面）放置的手持设备；屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。从上面的例子可以看出，字符间以空格相连，选取条件包含在小括号内，样式代码为兼容设置的

6、样式表，包含在中括号里面。only（限定某种设备，可省略），and（逻辑与），not（排除某种设备）为逻辑关键字，多种设备用逗号分隔，这一点继承了css基本语法。在CSS3中的MediaQueries模块中支持对外部样式表的引用，使用方法类型如下代码：@importurl(color.css)screenand(min-width:1000px);或：/*使用link导入外部css文件*/简写：上面使用中only可省略，限定于计算机显示器，第一个条件max-width是指渲染界面最大宽度，第二个条件max-device-width是指设备最大宽度。可用的设备类型在CSS中嵌入“@media”的方式，开头

8、必须书写“@media”,然后指定设备类型（上例使用screen代表电脑显示器）。CSS中定义了10种设备类型可以指定的值设置类型all所有设备braille盲文，即盲人用点字法触觉回馈设备embossed盲文打印机handheld手持的便携设备print文档打印用纸或打印预览视图模式projection各种投影设备screen彩色电脑显示器屏幕speech语言和音频合成器tty固定字母间距的网格的媒体，比如电传打字机和终端tv电视机类型的设备可用的设备特性参数通过设备类型可以区分使用的设备，再通过设备特性参数来设置同一设备的不同型号。

9、例如，通过设备类型指定电脑显示器，再通过设备特性参数指用多大屏幕的显示器。设备特性的书写方式与样式的书写方式很相似，分为两个部分，当中由冒号分割，冒号前书写设备的某种特性，冒号后书写该特性的具体值。例如“(