如何在媒体查询中添加多个条件 - CSS

在响应式设计中，媒体查询是至关重要的一个工具。它可以让我们根据不同设备的尺寸和特性，来设置不同的样式规则。

当然，有的时候我们需要根据多个条件来设置样式规则，此时就需要在媒体查询中添加多个条件。

媒体查询的基础

媒体查询的基础语法如下：

@media media-type and (media-feature) {
  /* 在此处添加样式规则 */
}

其中，media-type 表示媒体类型，可以是 screen（屏幕）、print（打印机）等，而 media-feature 则表示媒体特性，例如设备宽度、分辨率等。它们之间使用 and 关键字连接。

添加多个条件

如果我们需要在媒体查询中添加多个条件，可以使用 and 关键字来连接它们。例如：

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /* 在此处添加样式规则 */
}

上面的代码表示：仅在屏幕上，且宽度在 768px 到 1024px 之间的设备上应用样式。

我们还可以在媒体查询中添加更多条件，例如：

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* 在此处添加样式规则 */
}

上面的代码表示：仅在屏幕上，且宽度在 768px 到 1024px 之间，并且设备处于纵向（竖屏）状态时应用样式。

总结

在媒体查询中添加多个条件可以让我们更精确地针对不同的设备应用样式。使用 and 关键字连接多个条件即可。

以上就是如何在媒体查询中添加多个条件的介绍。