@media 中的多个值 - CSS

在CSS中，@media规则可以用于根据不同的媒介类型或设备的不同属性，来应用不同的CSS样式。@media规则可以用一个或多个媒介查询来定义，用逗号分隔。

多个值

可以在一个@media规则中使用多个媒介查询。这允许您根据多种条件（如视口宽度、设备方向和屏幕尺寸）来设置不同的样式。以下是一个使用多个值的@media规则示例：

@media (max-width: 768px), (orientation: landscape) {
  /* Styles for screens narrower than 768px or in landscape orientation */
}

在上面的示例中，有两个媒介查询被用做条件。第一个媒介查询选择所有视口宽度小于等于768px的设备，而第二个查询选择所有处于横向方向的设备。

如果您想要为更多的条件设置不同的样式，可以在同一个@media规则中使用多个媒介查询，每个查询之间用逗号分隔。每个查询都必须完全独立，且列出的每个条件都必须为真。

@media (max-width: 500px),
       (min-height: 700px) and (orientation: landscape),
       (min-width: 1200px) and (min-height: 800px) {
  /* Styles for screens that match any of the three conditions */
}

在上面的示例中，有三个媒介查询被用作条件。第一个查询选择所有视口宽度小于等于500px的设备；第二个查询选择所有高于700px并处于横向方向的设备；第三个查询选择所有视口宽度大于等于1200px且视口高度大于等于800px的设备。

总结

使用多个值的@media规则可以让您根据多个条件来设置不同的样式，并且可以提供更大的灵活性和可读性。需要注意的是，多个值之间是用逗号分隔的，并且每个值都必须独立，并列出的每个条件都必须为真。