响应式布局教程实例media queries模块上.pptx

MediaQuery的使用方法主讲人：高洛峰妹子

通过不同的媒体类型和条件定义样式表规则，媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。媒体查询能够获取的值如下：设备的宽和高device-width，device-heigth显示屏幕/触觉设备。渲染窗口的宽和高width，heigth显示屏幕/触觉设备。设备的手持方向，横向还是竖向orientation(portrait|lanscape)和打印机等。画面比例aspect-ratio点阵打印机等。设备比例device-aspect-ratio-点阵打印机等。对象颜色或颜色列表color，color-index显示屏幕。设备的分辨率resolution。

语法结构及用法?媒体查询有两种使用方式，一种是在CSS样式中内嵌“@media”，在同一个CSS中通过不同窗口编写不同的样式去选择。另一种是使用外部样式表的引用，在@import和link中使用“@media”，根据不同的窗口大小选择对应的样式文件。这两种方式的使用方法是一样的。MediaQueries的使用方法如下所示：?@media设备类型only(选取条件)not(选取条件)and(设备特性)，设备二{样式代码}

在CSS3中的MediaQueries模块中支持对外部样式表的引用，使用方法类型如下代码：?@importurl(color.css)screenand(min-width:1000px);或：linkrel=stylesheettype=text/cssmedia=onlyscreenand(max-width:480px),onlyscreenand(max-device-width:480px)href=link.cssrel=externalnofollow//*使用link导入外部css文件*/简写：linkrel=stylesheettype=text/cssmedia=screenand(max-width:480px)href=link.css/? 上面使用中only可省略，限定于计算机显示器，第一个条件max-width是指渲染界面最大宽度，第二个条件max-device-width是指设备最大宽度。

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

可用的设备类型?在CSS中嵌入“@media”的方式，开头必须书写“@media”,然后指定设备类型（上例使用screen代表电脑显示器）。CSS中定义了10种设备类型可以指定的值设置类型all所有设备braille盲文，即盲人用点字法触觉回馈设备embossed盲文打印机handheld手持的便携设备print文档打印用纸或打印预览视图模式projection各种投影设备screen彩色