作者：这篇文章由 Eric Shepherd 撰写，他在 Mozilla 开发者中心 领导 Mozilla 的文档项目。
在当今时代，Web 内容支持越来越广泛的设备渲染非常重要。用户不仅期望在他们的家用电脑上使用您的内容，或将其打印在纸上阅读，而且还希望在手持设备、手机以及其他具有独特功能的小工具上使用它，这些功能在性能和显示保真度方面都各不相同。
CSS 2 引入了媒体类型的概念，允许您根据内容渲染到的设备类型指定不同的样式规则。例如，当您的内容要打印时，您可以包含一个特定的样式表，如下所示
这是一个良好的开端；但是，这并不能提供根据设备分辨率、纵横比或内容是纵向还是横向查看等因素来微调内容渲染的功能。
Firefox 3.5 支持 媒体查询——CSS 3 的一项新功能——它使您可以更精确地定义在什么情况下应用什么样式。
它的工作原理是建立查询，查询查看各种媒体特征的值。这些特征有很多，包括颜色深度、渲染区域的宽度和高度、像素分辨率、显示器是否为彩色等等。您可以在 Mozilla 开发者中心关于媒体查询的文章 中找到完整列表。
媒体查询功能强大，但易于使用。请查看我为本文准备的 示例网页。
示例页面使用了两个样式表，它们使用以下规则指定
此规则使用媒体查询 all 和 (orientation:portrait) 来指示如果内容在显示区域（例如 Firefox 中的窗口）的高度大于宽度时，应使用 portrait.css 样式表。
此规则指定当内容渲染在宽度大于高度的表面上时，应应用 landscape.css 样式表。
媒体查询非常酷的一点是，它们在每次显示模式更改时都会进行评估；例如，如果您打开 示例页面 并开始调整窗口大小，您会发现当窗口宽度大于高度（即横向方向）时，工具栏位于页面左侧。
当您调整窗口大小使其处于纵向方向时，工具栏会移动到窗口顶部。这是在您调整窗口大小时实时完成的。
如果您查看 landscape.css 文件内部，您会发现其中也有一些媒体查询，它们会根据窗口宽度覆盖 <body> 元素的样式。默认情况下，正文文本的高度为 14 像素。
@media all and (min-width: 600px) {
body {
font-size: 16px;
}
}
但是，此媒体查询指示如果窗口宽度至少为 600 像素，则正文文本的字体大小应增加到 16 像素。
@media all and (min-width: 700px) {
body {
font-size: 20px;
}
}
类似地，此媒体查询使正文的字体大小在窗口宽度至少为 700 像素时变为 20 像素。另一个类似的媒体查询在窗口宽度至少为 800 像素时使字体更大。
因此，当您调整窗口大小时，您会看到 Firefox 不仅会在窗口宽度更改时自动在 portrait.css 和 landscape.css 样式表之间切换，而且在使用 landscape.css 样式表进行渲染时，样式也会根据窗口的精确宽度而更改。
另一个很好的用途是根据显示区域的宽度调整内容显示的列数。
目前，Firefox 3.5、Safari 3 和 Opera 7 及更高版本支持媒体查询，后续版本通常会添加对更多媒体特征的支持。
您可以在 MDC 关于媒体查询的文章 中获取有关 Firefox 支持哪些媒体特征的详细信息。Opera 9.5 的媒体特征支持概述在 这篇文章 的底部附近。我无法找到有关 WebKit 媒体查询支持的详细信息。
媒体查询提供了一种极好的方法来改进您的内容在各种设备上的显示效果；使用适当的查询，您可以根据屏幕尺寸、分辨率等进行不同的渲染，从而优化您的内容，无论用户如何访问它。
关于 Christopher Blizzard
一次发布，让网络变得更好。
13 条评论