下面的样式会在可视区域的宽度小于 600px 的时候被应用。
如果你想链接到一个单独的样式表，把下面的代码放在<head>标签里。
下面的样式会在可视区域的宽度大于 900px 的时候被应用。
你还可以使用过个匹配条件，下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。
下面的样式会在 max-device-width 是 480px 的设备上触发。（提示：max-device-width 是设备的实际分辨率，而 max-width 指的是可视区域分辨率。）
遗憾是的，IE8 及更老版本的浏览器不支持 CSS3 Media Queries，不过可以使用 Javascript 弥补，下面是一些解决方案：
<a href="http://css-tricks.com/resolution-specific-stylesheets/" target="_blank">CSS Tricks - using jQuery to detect browser size</a>
<a href="http://www.themaninblue.com/experiment/ResolutionLayout/" target="_blank">The Man in Blue - using Javascript</a>
<a href="http://plugins.jquery.com/project/MediaQueries" target="_blank">jQuery Media Queries Plugin</a>
附：CSS3 Media Queries 浏览器兼容性表
需要在下面这些支持 Media Queries 特性的浏览器中浏览：IE9+, Firefox, Chrome 和 Safari。浏览每个站点，看页面布局是如何响应浏览器窗口变化的。
大尺寸: 3 列侧栏
较小尺寸: 2 列表侧栏 (中间一列下降到左边的列)
更小尺寸: 1 列侧栏 (右列上移到标志下方)
最小尺寸: 没有侧栏 (LOGO及右列上移，其他侧边栏列移到底部)
页面的布局会根据浏览器的尺寸在1列，2列和4列之间切换。
大尺寸: 导航在顶部，图片只有一行。
中等尺寸: 导航在左边，图片变成3列。
小尺寸: 导航在顶部，LOGO没有了背景图片，图片变成3列。
这个和前面的 Colly 很像，不过这个案例中的图片也会随着布局的变化而变化。技巧是使用百分比设置元素的宽度。
请记住：为移动设备优化了样式表并不意味着你的网站就适合在移动设备显示了。要做到真正的移动设备优化，要削减图像大小、标签数量和加载的资源尺寸等等。CSS3 Media Queries 是用于设计的呈现，而不是优化。
【参考文章】
<a href="http://www.cnblogs.com/lhb25/archive/2012/03/05/few-new-collections-css3-effects.html" target="_blank">20个非常绚丽的 CSS3 特性应用演示</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/07/25/23-popular-logos-built-purely-with-css3.html" target="_blank">23个纯 CSS3 打造的精美LOGO图案</a>
<a href="http://www.cnblogs.com/lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html" target="_blank">35个让人惊讶的 CSS3 动画效果演示</a>
<a href="http://www.cnblogs.com/lhb25/archive/2011/05/12/2020284.html" target="_blank">推荐12个漂亮的 CSS3 按钮实现方案</a>
<a href="http://www.cnblogs.com/lhb25/archive/2011/03/09/1964344.html" target="_blank">24款非常实用的 CSS3 工具终极收藏</a>
欢迎任何形式的转载，但请务必注明出处。