我有以下 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 ]*
;