CSS3 Media Queries 实现响应式设计

2013-06-29|1793阅|作者：小蜜锋|举报

摘要:在 CSS2 中，你可以为不同的媒介设备（如屏幕、打印机）指定专用的样式表，而现在借助 CSS3 的 Media Queries 特性，可以更为有效的实现这个功能。你可以为媒介类型添加某些条件，检测设备并采用不同的样式表。

　　在 CSS2 中，你可以为不同的媒介设备（如屏幕、打印机）指定专用的样式表，而现在借助 CSS3 的 Media Queries 特性，可以更为有效的实现这个功能。你可以为媒介类型添加某些条件，检测设备并采用不同的样式表。

　　例如，你可以把用于大屏幕上显示的样式和用于移动设备的专用样式放在一个样式文档中，这样，在不改变文档内容的情况下，不同的设备可以呈现不同的界面外观。阅读这篇文章学习 CSS3 Media Queries 的基本功能和国外使用 CSS3 的 Media Queries 特性的优秀网站案例。

CSS3 Media Queries

看下这个在线演示，调整你的浏览器窗口尺寸，看看它的变化。

Max Width

下面的样式会在可视区域的宽度小于 600px 的时候被应用。

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

如果你想链接到一个单独的样式表，把下面的代码放在<head>标签里。

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

Min Width

下面的样式会在可视区域的宽度大于 900px 的时候被应用。

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

Multiple Media Queries

你还可以使用过个匹配条件，下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。

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

Device Width

下面的样式会在 max-device-width 是 480px 的设备上触发。（提示：max-device-width 是设备的实际分辨率，而 max-width 指的是可视区域分辨率。）

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

For iPhone 4

下面的样式是为 iPhone 4 专门写的 (作者: Thomas Maier)。

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

For iPad

你还可以使用 media query 在 iPad 上检测方向(portrait or landscapse) (作者: Cloud Four)。

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