不（最大宽度：512px）不工作

Question

我有以下 HTML 页面：

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

Foobar

然而，这对 window 的 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>

在CSS规范中，您可以找到以下syntax for media queries。你可以看到 NOT isn't allowed 直接在表达式前面：

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

not (max-width: 512px) not working