先记住这个答案
and 要求所有条件为真,如 (min-width: 600px) and (orientation: landscape)。or 和逗号等价,任一为真即匹配,如 (max-width: 600px), (orientation: portrait)。not 对整个查询取反,但仅作用于用逗号分隔的单个查询。要表达“非小屏”,最稳妥是写 (min-width: 768px),因为 not 在旧浏览器有兼容问题,且 not all and 更明确但冗长。
- and 表示所有条件都满足才匹配
- or 和逗号等价,任一满足即匹配
- not 对整个查询取反,慎用
逻辑组合的语义与优先级
媒体查询由媒体类型、媒体特性和逻辑运算符组成。and 连接各部分,比如 screen and (min-width: 600px) and (orientation: landscape),所有条件都必须为真。而 or 或逗号将多个查询组合成列表,只要其中一个查询为真,整个规则就生效。多个特性必须用 and 显式连接,省略 and 并列书写是无效语法。
not 作用于它所在的整个查询,不是单独的特性。例如 not screen and (color) 等价于 not (screen and (color)),而不是 (not screen) and (color)。在逗号分隔的列表中,not 只对当前这个查询取反,不影响其他查询项。最高优先级是 not,然后是 and,最后是逗号(或 or)。
表达“非小屏”的三个方案
假设设计稿定义小屏为 max-width: 767px,非小屏就是视口宽度至少 768px。最直接的是 @media (min-width: 768px),它清晰、符号少,也不依赖 not 的语义。另一种写法是 @media not all and (max-width: 767px),语义上等于“不是所有宽度不超过 767px”,但总长度更长且容易让阅读者停顿。还可用 @media not (max-width: 767px),不过该语法仅在较新的浏览器中被支持。
实践中推荐用 min-width: 768px 直接描述目标范围,因为范围更直观,也不存在 not 可能造成的旧浏览器解析风险。若某些代码块必须只在“不是小屏”时应用,也就是宽度大于 767px,min-width: 768px 是同一条件。核心是避免把“非 A”当成 not (A) 来书写,而直接写出正面的范围条件。
not 的失效边界与替代
not 在媒体查询 Level 4 中已定义,但老旧浏览器(IE 和旧版 Edge)在解析 @media not (max-width: 767px) 时可能完全忽略整个规则,因为它们只理解 Level 3 语法:not 之后必须跟媒体类型,不能直接跟特性。为避免这种整条规则被丢弃的后果,要么使用 not all and (expression),要么避免 not,改用明确的范围条件。
逗号列表中的 not 只对该列表项生效,比如 @media not screen, print 表示“非屏幕”或“打印”,在列表项较多时容易困惑。可读性和可维护性最佳的方式是用 only screen 结合范围特性,或直接用 (min-width: 768px)。
容易答错的地方
- not 单独否定特性
- 有人认为
@media not (max-width: 767px)在旧浏览器可用,但 Media Queries Level 3 中not后必须跟媒体类型,因此旧浏览器会忽略该规则。当需要非小屏时,直接用(min-width: 768px)更可靠。 - 混淆逗号与 and
- 把逗号当作“同时满足”来写,例如
@media (min-width: 600px), (max-width: 800px)本意是宽度在 600-800px 之间,但逗号实际表示或,导致所有小于等于800px或大于等于600px的设备都命中。应用 and 连接两个条件。
面试官还会怎么问?
not all 与 not 的区别是什么?
not all and (...) 明确包含类型 all,语义是“不是所有满足(...)的情况”,适用于任何媒体类型。单写 not (...) 在 Level 4 中也暗示 all,但老浏览器不支持。建议在需要否定时始终写 not all and。
逗号和 or 在媒体查询中完全等价吗?
是,or 运算符是 Media Queries Level 4 为替代逗号引入的,二者逻辑相同。但逗号兼容性更好,且在某些场景中可读性相似。两者都不影响 CSS 优先级。
如何理解媒体查询中的优先级?
媒体查询本身没有优先级,只有匹配或不匹配。当多条规则匹配时,按照 CSS 源码顺序和选择器特异性决定应用哪条。因此,通常把范围条件写得互斥以避免覆盖混乱。
参考资料
示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。