css - 为什么 `not (some-width: Xem)` 媒体查询永远不会触发？

Question

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

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

我做错了什么？

Answer 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