如何在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关键字分隔每个条件.

必须在每个查询中重复应对所有媒体查询都适用的任何条件; 在你的情况下,这种常见的情况是only screen.

从而:

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

如果您需要在CSS @media规则而不是HTML media属性中使用此媒体查询,请注意该@media标记只出现一次,因为它在技术上不是媒体查询的一部分:

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