[翻译]CSS3 Media Queries

Media Queries Official Manual:http://www.w3.org/TR/css3-mediaqueries/

原文链接：http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

在CSS2中就通过media types来实现media queries(媒体查询)的功能特性了。你可以使用Media Types来指定所要的一种媒体目标，所以你可以指定print，handled等等，但是这些媒体类型被支持得太少，所以你很少看到media types在被使用，除了print媒体类型。

在CSS3中，Media Queries得到了进一步的发展，它不再是以设备的类型为主，而更多的是关注设备的容量（the capability of the device），而且你可以使用来检查各种各样子的设备。例如：

• 宽度和高度（浏览器窗口）
• 设备的宽度和高度
• 方向——例子就是一台手机是横向（landscape）显示，或直向（portrait）显示？
• 分辨率（resolution）

Media Queries的第一种用法就是，我们直接在原来的样式文件中添加针对小屏幕设备的media queries样式。如下所示：

A very simple two columns layout

如果用户的浏览器是支持media queries的，那么我们就可以写出特定的CSS来解决特定的情景，例如检测到用户是使用诸如智能手机这样子的小屏幕设备，那么就返回专门的布局页面给这些访问请求。

我们并不是将原来的网站缩小来适应小屏幕设备，而是将内容重构，让页面更加友好的在小屏幕的设备上显示。

为了适应小屏幕设备，我们可以使用下面的语法：

@media only screen and (max-device-width: 480px){

}

然后我们可以在花括号内为了小屏幕和小宽度的设备添加CSS，通过使用瀑布流式来组织的样式可以让我们先前为桌面浏览器而写的样式，得到很方便的重写，只要这部分样式放在你CSS文件的最后，那么它就会重写先前的样式规则。因此，线性化我们的布局与使用更小的头部图片，那么可以添加下面的样式。

@media only screen and (max-device-width: 480px){

　　　div#wrapper{

　　　　　　width: 400px;

　　　　}

　　　div#header{

　　　　　　background-image: url(media-queries-phone.jpg);

　　　　　　height:93px;

　　　　　　position:relative;

　　　　}

　　div#header h1{font-size:140%;}

　　#content{float:none;width:100%;}

　　#navigation{float:none;width:auto;}

}

上面的样式中使用替换的背景图片，并减小头部的高度，然后将内容（#content）和导航（#navigation）不浮动，同时重写覆盖前面样式所定义的宽度，这些样式只会在小屏幕设备下面才生效。如下图：

Media queries的第二种用法就是：通过media queries引用一个独立分离的样式文件（linking a separate stylesheet using media queries）

上面第一种Media queries用法就是通过内联，如果你只是做很少的一些改变，那么通过为了设备添加特定的内联样式代码是一种好方式。如果你的样式中包含了很多的重写，又或者你想要将桌面浏览器的样式与那些小屏幕设备使用的样式完全分离，那么引用一个独立的样式文件可以让使CSS分离。

在你的主要样式文件后面添加一个独立的样式文件，并且使用瀑布刘方式重写那些规则，使用方法如下：

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />