能够让网站针对不同的浏览器和设备呈现不同显示效果
引入媒体查询
媒体查询写在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){ / 竖屏 */ }
