css3.0学习 media queries

%77w%77%2Ef%6F%72p%73%70%2Ec%6E

第七节 media queries

media queries

语法：
@media:<sMedia>{sRules}

取值：
<sMedia>:指定设备名称
{sRules}:样式表定义

说明：
判断媒介（对象）类型来实现不同的展现。此特性让CSS可以更精确作用于不同的媒介类型，同一媒介的不同条件(分辨率、色数等等)。
media_query:[only | not]?<media_type> [ and<expression>]*
expression:(<media_feature> [:<value>]?)
media_type:all | aural | braille | handeld | print | projection | screen | tty | tv | embossed
media_feature:width | min-width | max-width | height | min-height | max-height |device-width | min-device-width | max-device-width | device-height | min-device-height | max-device-height | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-raito | color | min-color | max-color | color-index | min-color-index | max-color-index | monochrome | min-monochrome | max-monochrome |resolution | min-resolution | max-resolution | scan | grid

兼容性：
Firefox3.5，Chrome1.0，Chrome1.0，Opera9.63,Safari3.1，Safari4

代码示例：
<style>
div.example{background-color: #cee;}
@media all and (min-width: 640px) {
div.example {
background-color: #cff;
}
}
@media screen and (max-width: 1100px) {
div.example {
background-color: #c00;
 }
}
</style>
<div class="example">
这是一个背景色例子 -_-!!!
</div>