一、Media Queries 支持的属性

二、关键字and - 结合多个媒体查询 not - 排除某种制定的媒体类型 only - 用来定某种特定的媒体类型

三、引用样式示例

1. "stylesheet"media="all"href="style.css"/>
2. "stylesheet"media="screenand(min-width:980px)"href="desktop.css"/>
3. "stylesheet"media="screenand(min-width:768px)and(max-width:980px)"href="pad.css"/>
4. "stylesheet"media="screenand(min-width:480)and(max-width:768px)"href="phone.css"/>
5. "stylesheet"media="screenand(max-width:320px)"href="small.css"/>

四、内联样式示例

1. @mediascreenand(min-width:980px){
2. //csscode
3. }
4. @screenand(min-width:768px)and(max-width:980px){
5. //csscode
6. }
7. @screenand(min-width:480)and(max-width:768px){
8. //csscode
9. }
10. @screenand(max-width:320px){
11. //csscode
12. }
14. @mediascreenand(max-device-width:480px){
15. //max-device-width等于480px
16. }
17. @mediascreenand(device-aspect-ratio:16/9),screenand(device-aspect-ratio:16/10){
18. //设备宽高比
19. }
20. @mediaalland(orientation:portrait){
21. //竖屏
22. }
23. @mediaalland(orientation:landscape){
24. //横屏
25. }

五、I8的兼容性问题解决问题根源：在项目的CSS文件中采用了media这东东来根据视窗的大小自动调整布局，但是，但是IE8及以下版本浏览器不支持CSS3 media queries，也就是@media screen and (max-width: 900px) 里面的css代码没有执行，

1. @mediascreenand(max-width:900px){
2. ...
3. }

这如何是好啊，网上倒是有不少人提出解决方法，最简单的方法就是：IE8和之前的浏览器不支持CSS3 media queries，你可以在页面中添加css3-mediaqueries.js来解决这个问题。