@media断点需显式声明screen、按序排列且策略统一：min-width从小到大，max-width从大到小；推荐移动优先（min-width增强），避免混用导致区间遗漏。
@media 中的 min-width 和 max-width 不是“写上就自动适配”，它们的行为完全取决于你如何组织顺序、是否声明媒体类型、以及断点值之间是否存在覆盖或遗漏。
为什么 @media (max-width: 768px) 在 Safari 或 Electron 里不生效
根本不是语法错误，而是没显式声明媒体类型。@media (max-width: 768px) 等价于 @media all and (max-width: 768px)，而部分旧版 Safari 和 Electron 渲染引擎对 all 类型下的断点解析不完整，尤其在非屏幕上下文（如打印预览）中会跳过计算。
- ✅ 正确写法：
@media screen and (max-width: 768px) - ❌ 风险写法：
@media (max-width: 768px)（兼容性隐患） -
only screen中的only是为兼容老 IE 设计的，现代项目可省略，但screen不可省
min-width 和 max-width 的断点顺序不能乱
CSS 是从上到下解析的，后面规则可能覆盖前面规则——尤其是当多个媒体查询同时匹配时。
- 用
min-width：断点值必须**从小到大排列**，比如先写@media (min-width: 768px)，再写@media (min-width: 992px)，最后写@media (min-width: 1200px) - 用
max-width：断点值必须**从大到小排列**，比如先写@media (max-width: 1199px)，再写@media (max-width: 991px)，最后写@media (max-width: 767px) - 混用
min-width和max-width在同一组逻辑中极易绕晕自己，也容易漏掉中间区间（比如768px–991px没被任何规则覆盖）
移动优先 vs 桌面优先：策略决定断点写法
两种主流策略对应完全不同的断点组织逻辑，选错会导致样式维护成本陡增。
立即学习“前端免费学习笔记（深入）”；
- 移动优先：基础样式默认适配小屏，用
min-width逐级增强，例如：@media (min-width: 768px) { ... }表示“≥768px 时启用平板样式” - 桌面优先：基础样式按大屏写，用
max-width向下覆盖，例如：@media (max-width: 767px) { ... }表示“≤767px 时启用手机样式” - 推荐统一采用移动优先，因为更符合现代开发流程（小屏设备占比高、逻辑线性、不易遗漏）
- 断点值建议递增且无重叠：768px → 992px → 1200px，避免写成 768px → 1024px → 1024px（重复）或 768px → 991px → 1200px（992–991 区间空缺）
最常被忽略的一点是：断点不是孤立存在的，它和基础样式、选择器权重、!important 使用、甚至 HTML 结构深度都强相关。一个看似正确的 @media 规则失效，大概率不是媒体查询本身的问题，而是它被更靠后、更具体或带 !important 的样式压住了。
