CSS3 Media Queries

MediaQueries媒体查询功能：在不同的条件下使用不同的样式，使用页面达到不同的渲染效果。

CSS3中的MediaQueries增加了更多的媒体查询，可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件，如果媒体符合相应的条件，那么就会调用对应的样式表。

最常见的例子：同时给PC机的大屏幕和移动设备设置不同的样式表。实现了web页面在不同的分辨率和设备下都能显示正常，并且不会丢失样式。

//当屏幕小于或等于600px时，将采用small.css样式来渲染页面
<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />
//当屏幕大于或等于900px时，将采用big.css样式来渲染页面
 <link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />
//当屏幕在600px-900px之间时采用style.css样式来渲染页面
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />
//宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上渲染页面
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

max-width指的是可视区域分辨率，而max-device-width是设备的实际分辨率：

//max-device-width 是 480px 的设备上触发样式
@media screen and (max-device-width: 480px) {
  .class {background: #000;}
}
 <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />　

//iphone4
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
//iPad:纵向(portrait)时采用portrait.css渲染页面,横向（landscape）时采用landscape.css渲染页面
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" /> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"  type="text/css" />

//排除符合表达式的设备
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />
//排除不支持媒体查询的浏览器
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
//没有明确指定Media Type，那么其默认为all,支持所有媒体介质
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />

http://www.w3cplus.com/content/css3-media-queries

http://www.cnblogs.com/lhb25/archive/2012/12/04/css3-media-queries.html