CSS 媒体查询

CSS 媒体查询（Media Queries）是一种开发响应式网页设计的技术，它允许我们在不同设备上应用不同的样式规则。

基本语法

媒体查询由一个 @media 规则开始，后面跟着一个或多个条件。如果这些条件都被满足，就会应用嵌套在其中的样式规则。

@media (条件) {
  /* 样式规则 */
}

条件

条件是由一个或多个选择器组成的表达式。这些选择器可以是以下任意一种：

• 宽度选择器：min-width、max-width、width
• 高度选择器：min-height、max-height、height
• 设备类型选择器：screen、print
• 设备方向选择器：orientation
• 设备分辨率选择器：resolution

下面是一些常用的条件：

视口宽度

当视口宽度大于 600 像素时，应用样式规则。

@media (min-width: 600px) {
  /* 样式规则 */
}

当视口宽度小于等于 600 像素时，应用样式规则。

@media (max-width: 600px) {
  /* 样式规则 */
}

当视口宽度在 600 到 1000 像素之间时，应用样式规则。

@media (min-width: 600px) and (max-width: 1000px) {
  /* 样式规则 */
}

视口高度

当视口高度大于 600 像素时，应用样式规则。

@media (min-height: 600px) {
  /* 样式规则 */
}

当视口高度小于等于 600 像素时，应用样式规则。

@media (max-height: 600px) {
  /* 样式规则 */
}

设备类型

在屏幕设备上应用样式规则。

@media screen {
  /* 样式规则 */
}

在打印设备上应用样式规则。

@media print {
  /* 样式规则 */
}

设备方向

当设备处于纵向（竖直）方向时，应用样式规则。

@media (orientation: portrait) {
  /* 样式规则 */
}

当设备处于横向（水平）方向时，应用样式规则。

@media (orientation: landscape) {
  /* 样式规则 */
}

设备分辨率

当设备分辨率比例大于等于 2:1 时，应用样式规则。

@media (min-resolution: 2dppx) {
  /* 样式规则 */
}

参考资料

• CSS 媒体查询