详解CSS3特性@Media如何实现响应式设计
2013年响应式设计已经成为国外网站的一项标配功能，国内越来越多的开发人员开始关注响应式设计，2014年相信国内更多的网站也将使用响应式设计，因为利用CSS3特性@media将很简单就能实现响应式设计，一次开发同时能在手机，平板，PC桌面等不同分辨率的设备下拥有较好的浏览体验。
在 CSS2 中，你可以为不同的媒介设备（如屏幕、打印机）指定专用的样式表，而现在借助 CSS3 的特性@media，可以更为有效的实现这个功能。你可以为媒介类型添加某些条件，检测设备并采用不同的样式表。
例如，你可以把用于大屏幕上显示的样式和用于移动设备的专用样式放在一个样式文档中，这样，在不改变文档内容的情况下，不同的设备可以呈现不同的界面外观。阅读这篇文章学习你将学习@media的基本功能和国外使用 CSS3 的 Media Queries 特性的优秀网站案例。
@Media特性介绍及运用
在开始学习之前，本站为您提供了简单的示例，调整你的浏览器窗口大小，看看有什么变化。
最大宽度：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;
}
}多条件查询
你还可以使用过个匹配条件，下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
} 设备实际分辨率max-device-width
下面的样式会在 max-device-width 是 480px 的设备上触发。（提示：max-device-width 是设备的实际分辨率，而 max-width 指的是可视区域分辨率。）
@media screen and (max-device-width: 480px) {
.class {
background: #000;
}
} @Media浏览器兼容
@Media优秀的特性不支持IE9以下的版本
附：CSS3特性浏览器兼容性表
CSS3特性@Media的应用案例
以下的网站需要使用浏览器IE9+, Firefox, Chrome 和 Safari才能看到响应式设计的特点。
网站：Hicksdesign
- 大尺寸： 3 列侧栏
- 较小尺寸： 2 列表侧栏 (中间一列下降到左边的列)
- 更小尺寸：1 列侧栏 (右列上移到标志下方)
- 最小尺寸：没有侧栏 (LOGO及右列上移，其他侧边栏列移到底部)
网站：Colly
页面的布局会根据浏览器的尺寸在1列，2列和4列之间切换。
网站：A List Apart
- 大尺寸: 导航在顶部，图片只有一行。
- 中等尺寸: 导航在左边，图片变成3列。
- 小尺寸: 导航在顶部，LOGO没有了背景图片，图片变成3列。
总结：
为移动设备优化了样式表并不意味着你的网站就适合在移动设备显示了。要做到真正的移动设备优化，要削减图像大小、标签数量和加载的资源尺寸等等。CSS3 Media Queries 是用于设计的呈现，而不是优化。
本站也采用了响应式设计，大家可以调整浏览器窗口大小体验一下有什么不同，也可以也手机等其他设备体验一下！关于响应式设计重在思想，欢迎大家留言讨论！
扫一扫
105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
