响应式查询

http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml

@media only screen and (max-width: 320px) { //小于等于320像素}
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape){}  //321到480像素之间 且方向是“横向”时生效
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)//断终端的像素比是2的话，所渲染的样式。可以适用于iPhone4，iPhone5等设备。
<meta name="viewport" content="width=device-width; initial-scale=1.0">

 

all	所有设备
aural	听觉设备
braille	点字触觉设备
handled	便携设备，如手机、平板电脑
print	打印预览图等
projection	投影设备
screen	显示器、笔记本、移动端等设备
tty	如打字机或终端等设备
tv	电视机等设备类型
embossed	盲文打印机

 

完整的支持情况罗列成如下表：

IE6	不支持
IE7	不支持
IE8	不支持
IE9	支持
Chrome5	支持
Opera10	支持
Firefox3.6	支持
Safari4	支持