一、Media Queries 支持的属性

属性                值                 Min/Max     描述color               integer             yes         每种色彩的字节数color-index         integer             yes         色彩表中的色彩数device-aspect-ratio integer/integer     yes         宽高比例device-height       length              yes         设备屏幕的输出高度device-width        length              yes         设备屏幕的输出宽度grid                integer             no          是否是基于格栅的设备height              length              yes         渲染界面的高度monochrome          integer             yes         单色帧缓冲器中每像素字节resolution          resolution          yes         分辨率scan                                    no          tv媒体类型的扫描方式width               length              yes         渲染界面的宽度orientation         Portrait/landscape  no          横屏或竖屏

height              min-height              max-heightdevice-width        min-device-width        max-device-widthdevice-height       min-device-height       max-device-heightaspect-ratio        min-aspect-ratio        max-aspect-ratiodevice-aspect-ratio min-device-aspect-ratio max-device-aspect-ratiocolor               min-color               max-colorcolor-index         min-color-index         max-color-indexMonochrome          min-monochrome          max-monochromeResolution          min-resolution          max-resolution

二、关键字

and - 结合多个媒体查询not - 排除某种制定的媒体类型only - 用来定某种特定的媒体类型iy9HTML5中文学习网 - HTML5先行者学习网

三、引用样式示例

<link rel="stylesheet" media="all" href="style.css" /><link rel="stylesheet" media="screen and (min-width:980px)" href="desktop.css" /><link rel="stylesheet" media="screen and (min-width:768px) and (max-width:980px)" href="pad.css" /><link rel="stylesheet" media="screen and (min-width:480) and (max-width: 768px)" href="phone.css" /><link rel="stylesheet" media="screen and (max-width:320px)" href="small.css" />

四、内联样式示例

@media screen and (min-width: 980px) {    //css code}@screen and (min-width:768px) and (max-width:980px) {    //css code}@screen and (min-width:480) and (max-width: 768px) {    //css code}@screen and (max-width:320px) {    //css code}@media screen and (max-device-width: 480px) {    //max-device-width等于480px}@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) {    //设备宽高比}@media all and (orientation:portrait) {    //竖屏}@media all and (orientation:landscape) {    //横屏}

五、jQuery Media Queries Plugin for ie6/7/8

http://archive.plugins.jquery.com/project/MediaQueriesiy9HTML5中文学习网 - HTML5先行者学习网

六、Demo

本博客缩放即可看到效果iy9HTML5中文学习网 - HTML5先行者学习网

扩展阅读：

• http://www.w3.org/TR/css3-mediaqueries/
• https://developer.mozilla.org/en/CSS/Media_queries
• https://developer.mozilla.org/en/CSS/Media_queries
• http://dev.opera.com/articles/view/safe-media-queries/
• http://reference.sitepoint.com/css/mediaqueries
• http://mediaqueri.es