如何在 CSS 媒体查询中嵌套和/或声明？

Question

我想做一个媒体查询：

only screen and either
    (max-width: 64em) and (min-width: 24em)
        or
    (orientation: landscape)

在 JavaScript 表示法中，我想要的应该是这样的：

if ( screen === true && ( width > 24 && width < 64 ) || orientation === "landscape" )

我该怎么做？我可以使用括号吗？会不会：

<link 
    rel='stylesheet' 
    media='only screen and ( ((max-width: 64em) and (min-width: 24em)) or (orientation: landscape) )' href='style.css' />

这可能吗？

Answer 1

“或”用逗号分隔两个或多个整个媒体查询； "and" 与 and 关键字在每个媒体查询分隔每个条件。

任何对所有媒体查询都应该成立的条件必须在每个查询中重复；在你的情况下，常见的情况是only screen。

因此：

only screen and (max-width: 64em) and (min-width: 24em), 
only screen and (orientation: landscape)

如果您需要在 CSS @media at-rule 而不是 HTML media 属性中使用此媒体查询，请注意 @media 标记仅出现一次，因为它在技术上不是媒体查询的一部分：

@media only screen and (max-width: 64em) and (min-width: 24em), 
       only screen and (orientation: landscape)
{
}