@media ：<sMedia> { sRules }
CSS3在线中文参考指南 - media queries » 张鑫旭-鑫空间-鑫生活
it's my whole life!
哎呀，出了点小问题，您可以稍后重试！
未填写内容或格式不正确！
@media ：<sMedia> { sRules }
判断媒介(对象)类型来实现不同的展现。此特性让CSS可以更精确作用于不同的媒介类型，同一媒介的不同条件（分辨率、色数等等）.
media_query: [only | not]? <media_type> [ and <expression> ]* expression: ( <media_feature> [: <value>]? ) media_type: all | aural | braille | handheld | 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-ratio | 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
| 类型 |  Internet Explorer |
 Firefox |
 Chrome |
 Opera |
 Safari |
|---|---|---|---|---|---|
| 版本 | (×)IE6 | (×)Firefox 2.0 | (√)Chrome 1.0.x | (√)Opera 9.63 | (√)Safari 3.1 |
| (×)IE7 | (×)Firefox 3.0 | (√)Chrome 2.0.x | (√)Safari 4 | ||
| (×)IE8 | (√)Firefox 3.5 | ||||
.media_quires{width:200px; padding:40px 20px; background-color:#beceeb;}
@media all and (min-width: 800px) {
.media_quires {
background-color:#f0f3f9;
}
}
@media screen and (max-width: 1200px) {
.media_quires {
background-color:#cad5eb;
}
}
<div class="media_quires">改变浏览器窗口大小背景颜色改变</div>
