首页 > 代码库 > Media Queries语法总结
Media Queries语法总结
Media Queries的语法如下所示：
@media [media_query] media_type and media_feature
使用Media Queries样式模块时都必须以"@media"方式开头。
media_query表示查询关键字，在这里可以使用not关键字和only关键字。not关键字表示对后面的样式表达式执行取反操作。例如如下代码：
@media not screen and (max-device-width:480px)
only关键字的作用是，让不支持Media Queries的设备但能读取Media Type类型的浏览器忽略这个样式。例如如下代码：
@media only screen and (max-device-width:480px)
对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
虽然media_query这个类型在整个Media Queries语法中并不是必需的类型，但是有时候在实际开发过程中却是非常重要的查询参数类型。
media_type参数的作用是指定设备类型，通常称为媒体类型。实际上在CSS2.1版本时已经定义了该媒体类型。表6-1列出了media_type允许定义的10种设备类型。
表6 1 media_type设备可用类型一览表
media_type | 设备类型说明 |
all | 所有设备 |
aural | 听觉设备 |
braille | 点字触觉设备 |
handled | 便携设备，如手机、平板电脑 |
打印预览图等 | |
projection | 投影设备 |
screen | 显示器、笔记本、移动端等设备 |
tty | 如打字机或终端等设备 |
tv | 电视机等设备类型 |
embossed | 盲文打印机 |
media_feature的主要作用是定义CSS中的设备特性，大部分移动设备特性都允许接受min/ max的前缀。例如，min-width表示指定大于等于该值；max-width表示指定小于等于该值。
表6-2显示media_feature设备特性的种类一览表。
表6 2 media_feature设备特性一览表
设 备 特 性 | 是否允许 min/max 前缀 | 特 性 的 值 | 说 明 |
width | 允许 | 含单位的数值 | 指定浏览器窗口的宽度大小， 如480像素 |
height | 允许 | 含单位的数值 | 指定浏览器窗口的高度大小， 如320像素 |
device-width | 允许 | 含单位的数值 | 指定移动设备的屏幕分 辨率宽度大小，如480像素 |
device-height | 允许 | 含单位的数值 | 指定移动设备的屏幕分 辨率高度大小，如320像素 |
orientation | 不允许 | 字符串值 | 指定移动设备浏览器的窗口方向。 只能指定portrait（纵向）和landscape （横向）两个值 |
aspect-radio | 允许 | 比例值 | 指定移动设备浏览器窗口的 纵横比例，如16:9 |
device-aspect-radio | 允许 | 比例值 | 指定移动设备屏幕分辨率的 纵横比例，如16:9 |
color | 允许 | 整数值 | 指定移动设备使用多少位的颜色值 |
color-index | 允许 | 整数值 | 指定色彩表的色彩数 |
monochrome | 允许 | 整数值 | 指定单色帧缓冲器中每像素的字节数 |
resolution | 允许 | 分辨率值 | 指定移动设备屏幕的分辨率 |
scan | 不允许 | 字符串值 | 指定电视机类型设备的扫描方式。 只能指定两种值：progressive表 示逐行扫描和interlace表示隔行扫描 |
grid | 不允许 | 整数值 | 指定设备是基于栅格还是基于位图。 基于栅格时该值为1，否则为0 |
到目前为止，Media Queries样式模块在桌面端都得到了大部分现代浏览器的支持。例如IE 9浏览器、Firefox浏览器、Safari浏览器、Chrome浏览器、Opera浏览器。但是IE系列的浏览器中只有最新版本才支持该特性，IE8以下的版本不支持Media Queries。
从移动平台来说，基于两大平台Android和iOS的Web浏览器也都得到了良好的支持。同时，黑莓系列手机也支持Media Queries特性。
来自http://book.51cto.com/art/201204/328362.htm