}
如果设备的浏览器的最大宽度是240px，则页面将使用中号字体。
PS:属性和值之间是用冒号连接的，而不是等号，这与正常的CSS的写法一致。
媒体查询语句结构
我们可以将上述语句称为媒体查询语句，这样也更能理解一些。从上面的例子也可以看出，媒体查询语句一般由media type+一到多个CSS属性判断组成，而多个CSS属性判断可以用关键字and连接：
@media screen and (min-width:1024px) and (max-width:1280px){
body{font-size:medium;}
}
其中media type可以省略，属性值也可以为空：
@media (color:4){}
@media (color){}
当然，请注意，有属性值和没有属性值的情况代表的意义是不一样的，所以上面的这两条规则不是等价的。
而针对多个媒体类型的CSS规则，可以用逗号来隔开：
@media handheld and (min-width:360px),screen and (min-width:480px){
body{font-size:large;}
}
@media screen and (min-width:800px),print and (min-width:7in){
body{font-size:small;}
}
media query支持的属性
事实上，media query支持的属性和我们常用的CSS属性是不太一样的，它们是一些特别定义的条目：
| 属性 | 值 | Min/Max | 描述 |
|---|---|---|---|
| color | 整数 | yes | 每种色彩的字节数 |
| color-index | 整数 | yes | 色彩表中的色彩数 |
| device-aspect-ratio | 整数/整数 | yes | 宽高比例 |
| device-height | length | yes | 设备屏幕的输出高度 |
| device-width | length | yes | 设备屏幕的输出宽度 |
| grid | 整数 | no | 是否是基于格栅的设备 |
| height | length | yes | 渲染界面的高度 |
| monochrome | 整数 | yes | 单色帧缓冲器中每像素字节 |
| resolution | 分辨率(“dpi/dpcm”) | yes | 分辨率 |
| scan | Progressive interlaced | no | tv媒体类型的扫描方式 |
| width | length | yes | 渲染界面的宽度 |
| orientation | Portrait/landscape | no | 横屏或竖屏 |
从这些属性中我们可以看出，media query就是为了更好的适配各种设备而生的。
浏览器扩展
webkit
webkit是最早实现media query支持的浏览器内核之一，同时它也根据自己的需要搞了一些特有的扩展属性，最常用的有：
