CSS3 Media Queries

CSS2允许为特定的媒体指定样式表，如screen（屏幕）和print（打印），CSS3通过添加media queries（媒体查询库）使其更加有效。CSS3可以通过添加查询语句来确定不同的媒体类型，应用不同的样式表。例如为大的显示器指定一个样式表，为移动设备指定另一个样式表。有了这一强大的技术，我们可以在不改变内容的情况下为不同的分辨率和设备量身定制样式。本文接下来将介绍media queries教程，参看一些充分利用该技术的网站。

CSS3 Media Queries (demo)

查看演示，调整浏览器窗口大小以验证不同分辨率下的效果。

Max Width（最大宽度）

当浏览器可视区域小于600px时将应用下面的样式。

@media screen and (max-width: 600px) {
    .class {
        background: #ccc;
    }
}

如果想链接到独立的样式表，将以下代码放在<head>标签内即可。

<link href="small.css" rel="stylesheet" media="screen and (max-width: 600px)" />

Min Width（最小宽度）

当可视区域大于900px时将应用下面的样式。

@media screen and (min-width: 900px) {
.class {
background: #666;
}
}

多重Media Queries

可以多个media queries结合使用，可视区域介于600px-900px时将应用下面的代码。

@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}

设备宽度（Device Width）

如果max-device-width等于480px时将应用下面的代码（例如iPhone的屏幕）。注意：max-device-width指设备的实际分辨率，max-width则指的是可视区域的分辨率。

@media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}

用于iPhone 4

下面的样式是专门用于iPhone 4的（credits: Thomas Maier）。

[html]<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />[/html]

用于iPad

可以通过媒体库查询探测iPad的屏幕方向（竖屏或横屏）(credits: Cloud Four)。

<link href="portrait.css" rel="stylesheet" media="all and (orientation:portrait)" />
<link href="landscape.css" rel="stylesheet" media="all and (orientation:landscape)" />