CSS 自适应 @media 规则

应用场景

@media 规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。

媒体查询可用于检查许多事情，诸如：

视口的宽度和高度
设备的宽度和高度
方向（手机或平板电脑处于横屏还是竖屏模式？）
分辨率

应用示例

元素的背景颜色为白色，如果浏览器窗口的宽度为 600px 或更小时，把 元素的背景颜色更改为“浅蓝色”：

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