为啥“not (some-width: Xem)”媒体查询永远不会触发？

Posted 2023-05-08

【中文标题】为啥“not (some-width: Xem)”媒体查询永远不会触发？

【英文标题】：Why does `not (some-width: Xem)` media query never fire?为什么“not (some-width: Xem)”媒体查询永远不会触发？

【发布时间】：2014-08-18 19:23:14

【问题描述】：

我试图否定max-device-width 媒体查询（这样做的原因是，如果设备恰好具有该宽度，我不会同时触发(max-device-width: X) 和(min-device-width: X)）。不幸的是，not (min-or-max-some-width: X) 媒体查询永远不会触发。

这里是a small fiddle。我预计桌面上有两条黄线，移动设备上有两条红线。我得到的是桌面上只有一条黄线（最后一条），移动端只有一条红线（第一条）。

我做错了什么？

【参考方案1】：

首次引入媒体查询时，它要求not 关键字后跟媒体类型，以使媒体查询有效。看起来很奇怪，但是that's just how the grammar was defined（参见media_query 制作）。

这个问题现在在Media Queries level 4 中得到修复（参见<media_not> 产品），因此您所拥有的应该在符合 MQ4 的浏览器中按预期工作。但是，已经开始提供 4 级媒体功能的浏览器还没有实现新语法。

与此同时，您需要添加一种媒体类型。如果媒体类型不重要，请使用all：

not all and (max-device-width: X)

Updated fiddle

【讨论】：

@Septagram：确实如此。如果您将all and 添加到其余媒体查询中，它可能会有所帮助。添加not 只是简单地接受整个媒体查询并否定它。

如果我需要指定多个媒体查询并仅否定其中一个，例如G。我的意图是(min-some-parameter: 12em) and not (max-another-parameter: 15em)？

@Septagram：这应该可以通过嵌套@media 规则来实现，但是that's not completely supported across browsers yet。我不确定是否有解决方法，但我鼓励您单独发布 - 这是一个很好的问题。同时，我很想知道他们是否愿意为 MQ 级别 4 进行语法增强...