说起CSS3的新特性，就不得不提到 Media Queries 。最近 Max Design 更新的一个泛读列表里，赫然就有关于 Media Queries 的文章。同时位列其中的也有前天我刚刚翻译的 IE9, Opacity 和 Alpha 。
虽然标题相同，但本文并不是列表上 CSS3 Media Queries 的译文，因为原版有Demo有例子有图片，全文不长而且不难看懂，所以我也就不翻译了。基于自己已经了解到一定程度，所以就打算自己写。
CSS2中有已经定义了 Media 的部分，包括类型、组别和规则等。CSS并非为了显示器而创造，而是应用于各种各样的媒体，比如常见的显示器，越来愈多的手持设备，可能略显过时的电视机等等。
而 Media Queries 的引入，其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。
引用CSS3 Media Queries里的直观的 DEMO，当浏览器宽度改变时，应用的CSS发生变化。而这一切，原本需要 JavaScript 的控制才能做到。
Web移动化的趋势越加明显，各种手持设备的发展现在完全引领着整个互联网的发展。虽然国内受到很多制约，但是这种浪潮却无法阻挡。前段时间 jQuery宣布mobile计划，也加速了这种变化。Media Queries 不久的将来应该就会被广泛使用，以更好的支持新兴设备比如iPad。事实上， jQuery 甚至有 Media Queries的插件。
下面来看看 Media Queries 做了什么。
为了展示我拙劣的PS技术，以及为了不让我的伪技术博客过于沉闷，我画了下面这张图：
一个三栏布局，在屏幕变窄的情况下，变成1栏布局，甚至是消除多余两栏而只留下通常的内容的第2栏。Media Queries是如何工作的？
先看看 link 标签的写法：
<link rel="stylesheet" type="text/css" href="swordair.css" media="screen and (min-width: 400px)">
在media属性里：
- screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型
- and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)
- (min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。完整的特性参看 相关的Media features部分
媒体特性共13种，可以说是一个类似CSS属性的集合。但和CSS属性不同的是，媒体特性只接受单个的逻辑表达式作为其值，或者没有值。并且其中的大部分接受 min/max 的前缀，用来表示 大于等于/小于等于 的逻辑，以此避免使用 < 和 > 这些字符。
根据文档，我还是列张表吧：
| Media features | Value | Applies to | Accepts min/max |
|---|---|---|---|
| width | length | visual and tactile media types | yes |
| height | length | visual and tactile media types | yes |
| device-width | length | visual and tactile media types | yes |
| device-height | length | visual and tactile media types | yes |
| orientation | portrait | landscape | bitmap media types | no |
| aspect-ratio | ratio | bitmap media types | yes |
| device-aspect-ratio | ratio | bitmap media types | yes |
| color | integer | visual media types | yes |
| color-index | integer | visual media types | yes |
| monochrome | integer | visual media types | yes |
| resolution | resolution | bitmap media types | yes |
| scan | progressive | interlace | "tv" media types | no |
| grid | integer | visual and tactile media types | no |
那么，回到刚才的那条 Media Query，media="screen and (min-width: 400px)" 的意思就是当屏幕的宽度大于等于400px的时候，应用此条CSS。
一个 Media Query 包含一种媒体类型，如果媒体类型没有指定，那么就是默认类型all，比如：
<link rel="stylesheet" type="text/css" href="example.css"
media="(max-width: 600px)">
一个 Media Query 包含0到多个表达式，表达式又包含0到多个关键字，以及一种媒体特性，比如：
<link rel="stylesheet" type="text/css" href="example.css"
media="handheld and (min-width:20em) and (max-width:50em)">
逗号(,)被用来表示并列，表示或者。比如下面的例子表示此CSS被应用于宽度小于20em的手持，或者宽度小于30em的屏幕：
<link rel="stylesheet" type="text/css" href="example.css"
media="handheld and (max-width:20em), screen and (max-width:30em)">
not 关键字用来排除符合表达式的设备，比如：
<link rel="stylesheet" type="text/css" href="example.css"
media="not screen and (color)">
再看些其他例子(不准确，只是用来说明)：
<link rel="stylesheet" type="text/css" href="styleA.css"
media="screen and (min-width: 800px)">
<link rel="stylesheet" type="text/css" href="styleB.css"
media="screen and (min-width: 600px) and (max-width: 800px)">
<link rel="stylesheet" type="text/css" href="styleC.css"
media="screen and (max-width: 600px)">
上面将设备分成3种，分别是宽度大于800px时，应用styleA，宽度在600px到800px之间时应用styleB，以及宽度小于 600px时应用styleC。这其实是一个CSS覆盖的问题，所以当宽度正好等于800px时该应用那个样式？答案是styleB，因为前两条表达式都 成立，后者覆盖了前者。
所以说上面的例子虽然能工作，但是不准确。这个例子正常情况应该这样写：
<link rel="stylesheet" type="text/css" href="styleA.css"
media="screen">
<link rel="stylesheet" type="text/css" href="styleB.css"
media="screen and (max-width: 800px)">
<link rel="stylesheet" type="text/css" href="styleC.css"
media="screen and (max-width: 600px)">
并非所有的浏览器都支持Media Queries，那么这些浏览器怎么看待Media Queries？
Media Queries是CSS3对于Media Type的一个扩展，所以不支持Media Queries的浏览器，应该仍然要识别Media Type，但是IE只是简单的忽略了样式。only 关键字可能显得有些多余，对支持Media Queries的浏览器来说确实是这样，因为加不加 only 没有影响。only的作用，很多时候是用来对那些不支持Media Queries但是却读取Media Type的设备隐藏样式表的。比如：
<link rel="stylesheet" type="text/css" href="example.css"
media="only screen and (color)">
- 支持Media Queries的设备，正确应用样式，就仿佛only不存在
- 不支持Media Queries但正确读取Media Type的设备，由于先读取到only而不是screen，将忽略这个样式
- 不支持Media Queries的IE不论是否有only，都忽略样式
最后再来看看 Media Queries 的支持情况。不出意外的，IE678全部出局，但是IE9幸免。根据IEBlog上的这篇 HTML5 and Same Markup 来看，IE9支持Media Queries。至于其他浏览器，同样不出意外的，全部支持Media Queries。
完整的支持情况罗列成如下表：
| IE6 | 不支持 |
|---|---|
| IE7 | 不支持 |
| IE8 | 不支持 |
| IE9 | 支持 |
| Chrome5 | 支持 |
| Opera10 | 支持 |
| Firefox3.6 | 支持 |
| Safari4 | 支持 |