CSS3 Media Queries

阅读更多

    Media Queries媒体查询 功能：在不同的条件下使用不同的样式，使用页面达到不同的渲染效果。
    CSS3中的Media Queries增加了更多的媒体查询，可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件，如果媒体符合相应的条件，那么就会调用对应的样式表。

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

//当屏幕小于或等于600px时，将采用small.css样式来渲染页面

//当屏幕大于或等于900px时，将采用big.css样式来渲染页面
 
//当屏幕在600px-900px之间时采用style.css样式来渲染页面

//宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上渲染页面

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

//max-device-width 是 480px 的设备上触发样式
@media screen and (max-device-width: 480px) {
  .class {background: #000;}
}
 　

//iphone4

//iPad:纵向(portrait)时采用portrait.css渲染页面,横向（landscape）时采用landscape.css渲染页面
 

//排除符合表达式的设备

//排除不支持媒体查询的浏览器

//没有明确指定Media Type，那么其默认为all,支持所有媒体介质

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