CSS3 媒体查询

能够让网站针对不同的浏览器和设备呈现不同显示效果

引入媒体查询

媒体查询写在CSS样式代码的最后，CSS是层叠样式表，在同一特殊性下，靠后的的样式会重叠前面的样式

可以使用 not，and 和 only 等逻辑操作符构建复杂的媒体查询

• and 操作符用来把多个 媒体属性 组合成一条媒体查询。只有当每个属性都为真时，结果才为真。
• not 操作符用来对一条媒体查询的结果进行取反。
• only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。

举例
当宽度小于300px时，使背景颜色变化

@media screen and (max-width: 300px) {
  body {
        background-color:lightblue;
    }
}

媒体查询的参数

• 设备宽度：device-width | min-device-width | max-device-width

• 设备高度：device-height | min-device-height | max-device-height

• 设备宽度比：device-aspect-ratio: 16/9

• 设备方向：orientation: portrait / landscape

• 设备输出分辩率：min-resolution: 300dpi | min-resolution: 2dppx

• 屏幕像素比：min-device-pixel-ratio: 2 | min–moz-device-pixel-ratio | -webkit-min-device-pixel-ratio

• 渲染区域的宽度： width | min-width | max-width

• 渲染区域的高度： height | min-height | max-height

• 设备输出分辩率(打印分辩率)：dpi, dpcm, dppx

• 指定输出设备的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示。

• 横竖屏的判断
  @media (orientation : landscape){ /* 横屏 / }
  @media (orientation : portrait){ / 竖屏 */ }