我试图否定媒体查询(这样做的原因是,如果设备恰好具有该宽度,max-device-width
我不会同时(max-device-width: X)
触发)。(min-device-width: X)
不幸的是,not (min-or-max-some-width: X)
媒体查询永远不会触发。
这是一个小小提琴。我预计桌面上有两条黄线,移动设备上有两条红线。我得到的是桌面上只有一条黄线(最后一条),移动端只有一条红线(第一条)。
我究竟做错了什么?
我试图否定媒体查询(这样做的原因是,如果设备恰好具有该宽度,max-device-width
我不会同时(max-device-width: X)
触发)。(min-device-width: X)
不幸的是,not (min-or-max-some-width: X)
媒体查询永远不会触发。
这是一个小小提琴。我预计桌面上有两条黄线,移动设备上有两条红线。我得到的是桌面上只有一条黄线(最后一条),移动端只有一条红线(第一条)。
我究竟做错了什么?
首次引入媒体查询时,它要求not
关键字后跟媒体类型,以使媒体查询有效。看起来很奇怪,但这就是语法的定义方式(参见media_query
产生式)。
现在,这已在Media Queries 级别 4中得到修复(参见<media_not>
产品),因此您所拥有的应该在符合 MQ4 的浏览器中按预期工作。然而,已经开始提供 4 级媒体功能的浏览器还没有实现新语法。
同时,您需要添加媒体类型。如果媒体类型不重要,请使用all
:
not all and (max-device-width: X)