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

最佳答案

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

@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 ]*
;

10-05 20:38
查看更多