css - 不是(最大宽度 : 512px) not working

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>

在 CSS 规范上，您可以找到以下 syntax for media queries .您可以看到表达式前面不允许直接使用 NOT:

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