多个 CSS 媒体查询 - CSS

简介

CSS 媒体查询是一种基于媒体类型或其他属性进行样式规则应用的技术。它可以让我们在不同的设备或屏幕尺寸下应用不同的样式。

媒体查询语法

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

其中 (media feature) 表示媒体特性和值对，用于决定媒体查询是否匹配。例如：

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

这个媒体查询将会匹配宽度不大于 768 像素的设备。

多个媒体查询的应用

多个媒体查询可以让我们更加灵活地应用样式规则。以下是一个例子，展示了如何在不同设备下应用不同大小的字体。

/* 在小屏幕上应用14像素的字体 */
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

/* 在中等尺寸屏幕上应用16像素的字体 */
@media (min-width: 601px) and (max-width: 1024px) {
  body {
    font-size: 16px;
  }
}

/* 在大屏幕上应用18像素的字体 */
@media (min-width: 1025px) {
  body {
    font-size: 18px;
  }
}

这里我们使用了三个不同的媒体查询来匹配不同设备的尺寸，并分别应用不同大小的字体。

多个媒体查询也可以用逗号分隔的方式同时匹配多个条件，如下例所示：

/* 监听不同的方向 */
@media screen and (min-width: 480px),
  screen and (orientation: landscape) {
  /* 样式规则 */
}

这个媒体查询将会在屏幕宽度不小于 480 像素或屏幕处于横屏模式下匹配。

总结

CSS 媒体查询是前端开发中非常有用的一种技术，它可以让我们根据设备或屏幕尺寸等条件应用不同的样式规则。多个媒体查询的应用可以让我们更加灵活地对不同尺寸的设备进行优化。