【CSS】媒体（媒介 / media）查询

这篇文章距离上次修改已过200天，其中的内容可能已经有所变动。

媒体查询(Media Queries)是CSS3中的一个功能，可以根据不同的设备特性如屏幕尺寸、分辨率等来应用不同的样式规则。

解决方案1：




@media screen and (max-width: 600px) {
  body {
    background: blue;
  }
}

在屏幕宽度小于600px时，背景颜色变为蓝色。

解决方案2：




@media screen and (min-width: 600px) and (max-width: 800px) {
  body {
    background: yellow;
  }
}

在屏幕宽度在600px到800px之间时，背景颜色变为黄色。

解决方案3：




@media screen and (min-width: 800px) {
  body {
    background: green;
  }
}

在屏幕宽度大于800px时，背景颜色变为绿色。

解决方案4：




@media screen and (orientation: landscape) {
  body {
    background: orange;
  }
}

在屏幕处于横向模式时，背景颜色变为橙色。

解决方案5：




@media screen and (orientation: portrait) {
  body {
    background: purple;
  }
}

在屏幕处于竖向模式时，背景颜色变为紫色。

解决方案6：




@media (max-height: 400px) {
  body {
    background: pink;
  }
}

在屏幕最大高度为400px时，背景颜色变为粉色。

解决方案7：




@media (device-aspect-ratio: 16/9) {
  body {
    background: red;
  }
}

在屏幕宽高比为16:9时，背景颜色变为红色。

解决方案8：




@media (resolution: 300dpi) {
  body {
    background: black;
  }
}

在屏幕分辨率为300dpi时，背景颜色变为黑色。

解决方案9：




@media (scan: progressive) {
  body {
    background: white;
  }
}

在屏幕扫描方式为逐行扫描时，背景颜色变为白色。

解决方案10：




@media (grid: 0) {
  body {
    background: grey;
  }
}

在屏幕为电子网格或网格类型为0时，背景颜色变为灰色。