CSS 媒体查询的基本语法是什么？min-width 与 max-width 在移动优先和桌面优先写法中如何选择？

媒体查询的结构与执行逻辑

媒体查询由可选媒体类型（如 screen、print）与一个或多个特性表达式组成，特性必须放在圆括号内，并用逻辑操作符连接。例如 @media screen and (min-width: 600px) { ... } 表示类型为屏幕且视口宽度至少 600px 时应用。单个查询内需类型匹配且全部特性为真才命中；逗号分隔的多个查询则是任一命中即应用。

min-width 与 max-width 是范围媒体特性的两种前缀写法。min-width: 600px 等价于 width >= 600px，其关键在“最小”是包含边界值的，也就是宽度等于 600px 时也会命中。移动优先以基线样式为最小视口需求，随视口增宽用 min-width 逐级加入增强规则；桌面优先则相反，用 max-width 从宽屏基线向下覆盖。两种方向影响代码的源顺序和覆盖逻辑。

营销页面的断点决策

假设构建一个营销页面，主要用户来自移动端（约70%），设计稿给出 320px、750px、1200px 三个宽度形态。若采用 max-width 即桌面优先，基础样式面向 1200px，再用 max-width: 1199px、max-width: 749px 逐层调整。在这个例子里，越向下越依赖源顺序覆盖基线，可能需要重设三栏为两栏、一栏，覆盖链条更长。

改用移动优先：基础样式面向 320px，设定单栏线性布局、大字号、按钮全宽。随后用 min-width: 750px 写平板双栏调整，再用 min-width: 1200px 写桌面三栏。这样更倾向于在每个断点只补充差异，而不是反复拆除大屏布局；在该场景下通常更易读，也更贴近窄屏基线优先的思路，但不保证所有项目代码体积都更小。

不是所有情况都适用移动优先

如果项目从设计上就针对大屏的复杂仪表盘，且移动端仅做简略套用，那么用 max-width 从桌面基线向下调整会更贴近设计稿输出。需要注意的是，窄屏规则会受到上方桌面基线的级联影响，若断点交叠或源顺序不清，可能意外沿用或覆盖仅为大屏准备的成分；应把断点范围、顺序和注释写清楚。

浏览器支持通常不是取舍核心：min-width 与 max-width 在现代浏览器中都普遍可用，真正代价多在维护方式。结构复杂时，从窄屏基线做渐进增强往往更容易定位差异；但同一组件中混用两种前缀并非错误，例如可用 (min-width: 30em) and (max-width: 50em) 明确闭区间，关键是避免含义重叠且顺序含糊。

容易答错的地方

用 max-width 写移动优先

移动优先通常让窄屏基线不带媒体查询，再用 min-width 在更大视口增强。若核心断点又掺入 max-width 做反向覆盖，容易破坏从简到繁的递进，源顺序变化也更可能改变命中结果；个别例外（如横屏、打印）应单独说明。

认为断点必须用固定像素

断点不必固定用 px。媒体查询中的 em/rem 按初始字号计算（常见默认约 16px，可被用户默认字号改变），不随 html 根字号设置变化；px 与 em 在现代浏览器都可用。应基于内容开始失衡的宽度设断点，而不是设备型号；min/max 判断的是视口等环境，不识别具体机型。

面试官还会怎么问？

把知识连起来