媒体查询 CSS

媒体查询是一种让网页根据设备的特定属性来应用不同样式的技术。这样，可以在不同的设备上提供最佳的用户体验。

语法

@media only screen and (max-width: 768px) {
  /* 在 768px 及以下的屏幕上应用这个 CSS */
}

解释

@media 是一种特殊的 CSS 声明，它指定了在特定条件下应用一些规则。

在上面的例子中，only screen 表示只适用于屏幕设备，(max-width: 768px) 表示只适用于屏幕宽度小于等于 768 像素的设备。

在媒体查询中可以使用各种属性来匹配各种条件，比如设备方向、屏幕比率、分辨率等等。

如何使用

要使用媒体查询，只需要将它们放到你的样式表中，如下所示：

/* 应用到所有设备 */
body {
  font-size: 16px;
}

/* 仅应用到小屏幕设备 */
@media only screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

/* 仅应用到大屏幕设备 */
@media only screen and (min-width: 1200px) {
  body {
    font-size: 18px;
  }
}

示例

以下是一些常见的媒体查询示例：

设备方向

/* 仅应用于竖屏（高度大于宽度）设备 */
@media only screen and (orientation: portrait) {
  /* 竖屏样式 */
}

/* 仅应用于横屏（宽度大于高度）设备 */
@media only screen and (orientation: landscape) {
  /* 横屏样式 */
}

屏幕比率

/* 这里设备是 1:1 或者接近 1:1（比如平板） */
@media only screen and (aspect-ratio: 1 / 1) {
  /* 1:1 屏幕样式 */
}

/* 这里将只适合于 21:9 宽屏设备 */
@media only screen and (aspect-ratio: 21 / 9) {
  /* 比较宽的屏幕样式 */
}

分辨率

/* 这里适合于设备分辨率大于 2x 的显示器 */
@media only screen and (min-resolution: 192dpi) {
  /* 高分辨率样式 */
}

/* 这里适合于设备分辨率小于 2x 的显示器 */
@media only screen and (max-resolution: 96dpi) {
  /* 低分辨率样式 */
}

总结

媒体查询是一种灵活的 CSS 技术，可以根据设备的不同条件来应用不同的样式。这样可以为不同设备提供最佳的用户体验。要掌握它，我们需要涉及各种条件和属性，但是只要掌握了它们，就可以创建出优秀的网页。