响应式网页设计 - 媒体查询 @media

1. <meta name="viewport" content="width=device-width, initial-scale=1.0">
2. @media (max-device-width: 480px){...}                   设备最大宽度
3. @media (aspect-ratio: 3/2){...}                                 可视窗口宽高比
4. @media (device-aspect-ratio: 2/3){...}                     设备的宽高比
5. @media (orientation: portrail){...}                            设备方向垂直
6. @media (orientation: landscape){...}                        设备方向水平
7. @media (max-height: 480px){...}                              可视窗口最大高度
8. @media (max-device-height: 480px){...}                  设备最大高度
9. @media screen and (max-resolution: 150dpi){...}    输出的媒体的类型是screen，而且设备的屏幕像素密度小于等于150dpi
   

         safari不支持，解决方法：
            @media screen and (max-resolution: 150dpi), screen and (-webkit-device-pixel-ratio: 1) {...}）
        视网膜屏幕用dppx才能识别，所以用resolution，最好用以下写法：
            @media screen and (max-resolution: 1dppx), screen and (-webkit-device-pixel-ratio: 1) {...}）
10. 操作符 'and'、'not' （会先判断后面'and'的一组值，判断出true或false，再在前面加'not'）
        @media not screen and (max-resolution: 150dpi) {...}）

----ninghao.net课程

转载于:https://my.oschina.net/nancywong/blog/348943