颠覆网络35天 ─ Firefox 3.5中媒介查询简介
23 July 2009原文地址：a short introduction to media queries in Firefox 3.5
系列地址：颠覆网络35天
====================================
本文作者为Eric Shepherd──Mozilla开发者中心文档项目负责人之一。
现如今，支持将网页内容渲染到各种不同的设备上的需求越来越重要，而这些设备的种类也在日益增多。用户不仅仅希望能够在家用计算机上看到网页内容，或者打印到纸上，或者更希望能够在类似于手机这样的手持设备上使用这些网页内容，而且对于性能和显示的要求也越来越高。
CSS 2开始支持“媒介类型”（media type）的声明，可以允许您根据设备的不同指定不同的渲染风格规则。例如，您可以为打印效果做单独的设定：
<link rel=“stylesheet” media=“print” href=“print.css”>
非常容易，对吧～不过他还不能提供能够自动根据设备某些参数自动调节的渲染能力，例如设备的屏幕大小、屏幕比例等等。
Firefox 3.5开始支持媒介查询功能（media queries）──一个全新的CSS 3特性──可以更加详细的定义在何种情况下使用哪些样式来渲染内容。
这个功能会根据不同的媒介特性的取值来决定使用渲染样式，而这些媒介特性包括范围很广，包括颜色深度、渲染区域宽度高度、像素解析度、显示设备是否为彩色设备等等。您可以在Mozilla开发者中心上关于媒介查询的文章中找到完整的列表。
媒介查询相当强大，却非常易用。您可以看一下我为这篇文章准备的示例网页。
这个示例网页使用两个样式表，并使用下面两条规则指定：
<link rel=“stylesheet” media=“all and (orientation:portrait)” href=“portrait.css”>
这条规则使用媒介查询的all和(orientation:portrait)来指明，如果设备的显示区域（例如Firefox的窗口）高度大于宽度时，使用portrait.css样式表。
<link rel=“stylesheet” media=“all and (orientation:landscape)” href=“landscape.css”>
这条规则表明，如果设备的显示区域宽度大于高度时，使用landscape.css样式表来渲染内容。
媒介查询还有一个非常棒的特性就是每次显示模式发生改变的时候，这些查询规则都会重新运算，从而针对不同的显示模式做出调整；例如，如果您打开上面的示例页面并开始调整窗口大小，你会发现当窗口宽度大于高度时（就是在风景广角模式时），页面中的工具条会被调整到页面左边。
当你调整窗口大小到高度大于宽度（就是人像模式）时，页面中的工具条会移动到页面顶端。这些动作都会随着您的动作而发生变化。
在landscape.css的代码中，你会找到那里也使用了一些媒介查询，可以根据窗口的宽度重载<body>元素的字体大小。缺省情况下，该元素中字体大小为14像素。
@media all and (min-width: 600px) {
body {
font-size: 16px;
}
}
这段代码表示窗口或者显示区域应当最小600像素宽的时候才会应用这条样式，也就是当窗口宽度超过600像素的时候，字体会增大到16个像素。
@media all and (min-width: 700px) {
body {
font-size: 20px;
}
}
类似的，上面规则定义了，当窗口宽度超过700像素时，字体大小会增加到20像素。
所以，当您调整窗口大小时，不仅仅会看到Firefox自动调整使用portrait.css 或者 landscape.css样式表，而且当正在使用landscape.css风格渲染时，随着窗口宽度的变化，字体也在发生变化。
另一个很有用的地方就是自动根据宽度调整在页面中显示多少栏。
目前支持媒介查询的浏览器包括Firefox 3.5、Safari 3和Opera 7及之后的版本。
您可以在MDC上关于媒介查询的文章中获得更多细节信息。Opera 9.5对媒介查询的支持在这篇文章中可以找到。目前还没有找到任何关于WebKit对媒介查询的支持文档。
媒介查询提供了一个非常棒的方式来根据不同设备应用不同风格渲染；使用合适的查询，你可以根据屏幕大小、解析度等信息来采用不同的渲染方法，从而使您的网页内容更方便的被用户获取。
No comments yet