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 rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
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）。
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
用于iPad
可以通过媒体库查询探测iPad的屏幕方向（竖屏或横屏）(credits: Cloud Four)。
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
用于Internet Explorer的Media Queries
很不幸，Internet Explorer 9以前的版本的都不支持媒体查询，只能通过Javascript实现，下面是一些解决方案：
- CSS Tricks – using jQuery to detect browser size
- The Man in Blue – using Javascript (6年以前的文章)
- jQuery Media Queries Plugin
网站案例
下面的网站需要使用诸如Firefox、Chrome、Safari等支持media queries的浏览器查看（才能看到效果），注意观察不同浏览器窗口大小布局的变化。
Hicksdesign
- 大尺寸：三列边栏
- 较小尺寸： 两列边栏（中间的边栏掉到左边栏下面）
- 更小：1列边栏（最右边的一列上移到Logo下面）
- 最小：没有边栏（Logo和最右边的一列上移，另两列下移）
Hicksdesign在不同浏览器窗口大小下的效果
Colly
根据不同的浏览器可视区域，布局在一列、两列、四列间切换。
Colly根据不同浏览器可视区域切换布局
A List Apart
- 大尺寸：导航在顶部，图片显示为一行
- 中号尺寸：导航在左边，图片三列显示
- 小尺寸：导航在顶部，没有背景及Logo，图片三列显示
CSS3 Media Queries在中的应用A List Apart
Tee Gallery
和上面的Colly相似，不同的是TeeGallery的图片尺寸随着布局变化而变化，技巧是使用相对的百分比而不是固定的像素值（例如width=100%）。
CSS3 Media Queries在TeeGallery中的应用
总结
记住：有一个针对移动设备优化的样式表不等于网站针对移动网络优化。缩减载入图片和代码的大小才是真正的优化。Media queries只是设计网页表现，不是优化。
Pingback: CSS3 Media Queries 详解 | CSSPod