CSS 媒体查询的精确非（逆）

Posted 2023-03-06

【中文标题】CSS 媒体查询的精确非（逆）

【英文标题】：Exact NOT(Inverse) of CSS Media Query

【发布时间】：2011-08-11 14:02:40

【问题描述】：

以下 CSS 媒体查询的确切“NOT”是什么？

@media only screen and (device-width:768px)

只是补充一下，这意味着..所有除了 iPAD...或.....不是 iPAD..

顺便说一句……我已经试过了

@media not only screen and (device-width:768px)

这不起作用..

【问题讨论】：

顺便说一句，假设任何 758 像素宽的屏幕都是 iPad 似乎是个坏主意......

【参考方案1】：

@media not screen and (device-width:768px)

not和only在媒体查询中是互斥的； only 只需要解决一些为媒体字符串实现 html4 算法的降级 UA，因此当查询以 not 开头时，only 毫无意义。

【讨论】：

OK..Cool..@media 不能在 IE8 中使用屏幕和 (device-width:768px) 吗？

IE8 根本不支持媒体查询。这样媒体查询将被视为未知媒体而不匹配。

IE8 及以下版本可以强制使用媒体查询。这些工作：@media \0screen color:red; /* 以 ie8 为目标的媒体查询 */

IE8-: @media \0screen\,screen\9 color:red; /* 以 ie6-8 为目标的媒体查询 (ie8-) */