前端进阶之旅前端进阶之旅
  • 基础篇HTML/CSS/JS 打底
  • 进阶篇原理与工程化
  • 高频篇面试最常问的那批
  • 精选篇按模块收敛的总结
  • 手写篇常考代码手写实现
  • 面经篇真实面试问题复盘
  • AI 篇NEWAI 时代的前端考点
  • 历年面经NEW按年份追踪真实考点
  • 每日一题每天一道,攒手感
  • 专项自测100 题快速查漏
  • 小程序题库小程序专项刷题
  • 算法题库NEW在线编码即时判题
  • 知识卡片NEW碎片时间过考点
  • 面试题大全常见问题解析
  • AI 答疑NEW随时提问,即时解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • AI 定制路线NEW按你的简历现排
  • AI 知识地图NEW串起全站知识点
  • 原理篇React / Vue 源码拆解
  • HTTP从报文一路讲到 HTTPS
  • 浏览器渲染、事件循环、进程
  • 计算机基础Linux、网络、操作系统
  • 设计模式23 种模式怎么用
  • Node学习指南从环境搭建到服务端
  • NPM工作流script、依赖与发布
  • Docker容器化部署上手
  • Canvas图形与动画实战
  • 前端系统进阶学习大型项目工程化
  • 前端综合文章长期沉淀的实践文
  • 思维导图知识点全景图
  • 学习路线按图索骥不跑偏
  • AI 热点NEWAI 每日动态
  • 公众号动态公众号历史文章
  • 博客动态站长的技术博客
  • 开发者导航常用工具与文档站
  • 基础篇HTML/CSS/JS 打底
  • 进阶篇原理与工程化
  • 高频篇面试最常问的那批
  • 精选篇按模块收敛的总结
  • 手写篇常考代码手写实现
  • 面经篇真实面试问题复盘
  • AI 篇NEWAI 时代的前端考点
  • 历年面经NEW按年份追踪真实考点
  • 每日一题每天一道,攒手感
  • 专项自测100 题快速查漏
  • 小程序题库小程序专项刷题
  • 算法题库NEW在线编码即时判题
  • 知识卡片NEW碎片时间过考点
  • 面试题大全常见问题解析
  • AI 答疑NEW随时提问,即时解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • AI 定制路线NEW按你的简历现排
  • AI 知识地图NEW串起全站知识点
  • 原理篇React / Vue 源码拆解
  • HTTP从报文一路讲到 HTTPS
  • 浏览器渲染、事件循环、进程
  • 计算机基础Linux、网络、操作系统
  • 设计模式23 种模式怎么用
  • Node学习指南从环境搭建到服务端
  • NPM工作流script、依赖与发布
  • Docker容器化部署上手
  • Canvas图形与动画实战
  • 前端系统进阶学习大型项目工程化
  • 前端综合文章长期沉淀的实践文
  • 思维导图知识点全景图
  • 学习路线按图索骥不跑偏
  • AI 热点NEWAI 每日动态
  • 公众号动态公众号历史文章
  • 博客动态站长的技术博客
  • 开发者导航常用工具与文档站
首页程序员面试题库CSS media query logical operators and not
CSCSS响应式设计

CSS 媒体查询中的逻辑运算符 and、or(或逗号)和 not 如何工作?如何表达“非小屏”条件?

媒体查询中,and 连接多个条件需全部满足,or 或逗号表示任一满足即可,not 对整个查询取反。表达“非小屏”可用 not all and (max-width: 767px) 或直接写 (min-width: 768px)。

前端进阶之旅 · 一题精讲更新于 2026.09.05
CSS#响应式设计
先看核心答案
理解线索

逻辑运算符的优先级

  1. 逗号优先级最低逗号分隔的每个查询独立
  2. not 只作用于单查询not 不能单独否定特性
  3. 特性须显式 and多个特性必须用 and 连接

除非必要,用专用范围语法替代 not

核心回答

先记住这个答案

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 源码顺序和选择器特异性决定应用哪条。因此,通常把范围条件写得互斥以避免覆盖混乱。

从一道题,走向一组知识

把知识连起来

响应式设计

多条媒体查询匹配时,CSS 中的级联与优先级如何决定最终应用哪个规则?移动优先代码为何更清晰?

同属「响应式设计」专题,接着看 CSS 媒体查询 级联 优先级 覆盖顺序 在具体场景中的处理方式。

响应式设计

在 CSS 媒体查询中,媒体类型(如 screen、print)与媒体特性(如 width)有何区别?如何组合使用?

同属「响应式设计」专题,接着看 CSS 媒体查询 media type 与 media feature 区别 在具体场景中的处理方式。

响应式设计

prefers-reduced-motion 媒体特性如何用于减少动画?其使用限制和最佳实践是什么?

同属「响应式设计」专题,接着看 CSS prefers-reduced-motion media query 在具体场景中的处理方式。

参考资料

  • @media CSS at-rule

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 逻辑组合的语义与优先级
  3. 表达“非小屏”的三个方案
  4. not 的失效边界与替代
  5. 容易答错的地方
  6. 面试官还会怎么问
  7. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑