CSS3新特性一览 12. 媒体查询

12. 媒体查询

媒体查询（media queries）可以让你为不同的设备基于它们的能力定义不同的样式。比如，在可视区域小于480像素的时候，你可能想让网站的侧栏显示在主内容的下边，这样它就不应该浮动并显示在右侧了：

#sidebar {  
    float: right;  
    display: inline; /* IE Double-Margin Bugfix */ 
    }  
 
@media all and (max-width:480px) {  
    #sidebar {  
        float: none;  
        clear: both;  
        }  
    }

你也可以指定使用虑色屏的设备：

a {  
    color: grey;  
    }  
 
@media screen and (color) {  
    a {  
        color: red;  
        }  
    }

潜力是无限的。这个属性是很有用的因为你你不在需要必须为不同的设备写独立的样式表了，而且你也无需使用JS来确定每个用户的浏览器的属性和功能。一个实现一个灵活的布局的更加流行的基于Javascript的方案是使用智能的流体布局，让布局对于用户的浏览器分辨率更加灵活。

浏览器支持： 媒体查询被基于webkit核心的浏览器和Opera支持。Firefox将在3.5版本中支持它。IE目前不支持这些属性而且在将来的版本中，也没有支持的计划。