CSS3 @media 查询

实例

如果文档宽度小于 300 像素则修改背景演示(background-color):

@media screen and (max-width: 300px) {
    body {
       background-color:lightblue;
    }
}

CSS 语法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

你也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and | not | only (media feature)" href="mystylesheet.css">

mediatype（媒体类型）：

all 用于所有设备

only 限制设备，如only screen（只针对彩屏设备）

print 用于打印机和打印预览

screen 用于电脑屏幕，平板电脑，智能手机等（常用）

speech 应用于屏幕阅读器等发声设备

media feature（媒体功能）：常用如下

max-width（宽度小于时）

max-height （高度小于时）

min-width（宽度大于时）

min-height（高度大于时）