Last Modified: 2010-08-23

CSS3 Media Queries 详解

CSS2中有已经定义了 Media 的部分，包括类型、组别和规则等。CSS并非为了显示器而创造，而是应用于各种各样的媒体，比如常见的显示器，越来愈多的手持设备，可能略显过时的电视机等等。

而 Media Queries 的引入，其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。

引用CSS3 Media Queries里的直观的 DEMO，当浏览器宽度改变时，应用的CSS发生变化。而这一切，原本需要 JavaScript 的控制才能做到。

Web移动化的趋势越加明显，各种手持设备的发展现在完全引领着整个互联网的发展。虽然国内受到很多制约，但是这种浪潮却无法阻挡。前段时间jQuery宣布mobile计划，也加速了这种变化。Media Queries 不久的将来应该就会被广泛使用，以更好的支持新兴设备比如iPad。事实上， jQuery 甚至有 Media Queries的插件。

下面来看看 Media Queries 做了什么。

一个三栏布局，在屏幕变窄的情况下，变成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 featuresValueApplies toAccepts 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

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

bitmap media types

yes

scan

progressive | interlace

"tv" media types

grid

integer

visual and tactile media types

那么，回到刚才的那条 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

支持

其他定义media的方法比如@media等，应用Media Queries的方法相同，所以不在重复叙述。

本文链接：http://www.swordair.com/docs/interpretation-about-css3-media-queries/，转载请注明出处。