不(最大宽度:512px)不工作

Question

我有以下HTML页面:

<style>
  @media not(max-width: 512px) { * { color: red; } }
</style>

Foobar

但是,这对窗口没有反应width.永远不会应用媒体规则.如果我删除它not,它按预期工作.我怎么不明白not(max-width)？

是的,我知道还有其他方法可以完成同样的事情,并且not(max-width: 512px)与之相同min-width: 513px.但是,对于我正在构建的系统,我需要能够指定not(max-width).

Answer 1

您必须使用以下媒体查询:

@media not all and (max-width: 512px) {
  * { 
    color: red;
  } 
}

<span>Foobar</span>

https://css-tricks.com/logic-in-media-queries/#article-header-id-3

在CSS规范中,您可以找到媒体查询的以下语法.您可以NOT在表达式前面看到不允许直接:

: [ONLY | NOT]? S* media_type S* [ AND S* expression ]* 
| expression [ AND S* expression ]*
;

https://www.w3.org/TR/css3-mediaqueries/#syntax