不（最大宽度：512px）不起作用答案

【问题标题】：not (max-width: 512px) not working不（最大宽度：512px）不起作用
【发布时间】：2020-03-24 03:37:34
【问题描述】：

我有以下 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)。

【问题讨论】：

not 仅适用于媒体类型 media_query: [[only | not]? <media_type> [ and <expression> ]*]
这是一篇关于 @Justinas 所说的 css-tricks.com/logic-in-media-queries Chris 的相关引用的文章“只是不这样做（最大宽度：600px）似乎对我不起作用，因此上面的语法有点时髦。 "

【解决方案1】：

您可以使用以下媒体查询：

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

&lt;span&gt;Foobar&lt;/span&gt;

在 CSS 规范中，您可以找到以下syntax for media queries。您可以看到NOT 不允许直接放在表达式前面：

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

【讨论】：