优先用min-width实现移动优先的渐进增强，避免max-width因无下限导致的覆盖混乱；必须搭配viewport meta标签、统一使用px单位，并通过min-width与max-width组合（如min-width:480px and max-width:767px）精准控制断点区间。
移动端媒体查询里用 max-width 还是 min-width，不是语法问题，而是响应式策略方向的选择：你是在“降级”还是在“增强”。
为什么 max-width 容易导致样式覆盖混乱
纯靠 max-width 写断点（比如 @media (max-width: 768px)、@media (max-width: 1024px)）时，浏览器会按顺序逐条匹配——只要视口宽度 ≤ 该值，规则就生效。这意味着：
- 769px 宽度下，
@media (max-width: 1024px)生效，但@media (max-width: 768px)不生效 - 可一旦你在后面又加了
@media (max-width: 1200px)，它就会覆盖前面所有更窄的规则，除非你手动控制声明顺序 - 开发者工具里常看到“明明写了 768px 规则，却没生效”，其实是被后面更宽的
max-width规则里同名属性覆盖了
这不是 bug，是 max-width 本身的设计逻辑：它只管“上限”，不管“下限”，天然缺乏区间感。
min-width 是移动优先的底层支撑
现代响应式默认采用“移动优先”，即基础样式适配小屏，再逐步向上增强。这时 min-width 成为自然选择：
-
@media (min-width: 480px)表示“≥480px 才启用”，不会影响更小的屏幕 - 后续加
@media (min-width: 768px)，只叠加新规则，不破坏已有逻辑 - 所有断点形成清晰的“阶梯式增强”，无需担心低宽度规则被意外覆盖
注意：min-width: 768px 和 max-width: 768px 在 768px 视口下会同时匹配——这不是冲突，而是设计使然；关键是你得确认哪条规则里的属性最终被应用（看 DevTools 的 Computed 面板）。
混合使用时，边界必须显式对齐
真要写区间（如“仅在 480px–768px 之间生效”），必须用 and 显式组合：
@media (min-width: 480px) and (max-width: 767px) { /* 注意是 767，不是 768 */ }
原因很实际：
-
max-width: 768px包含 768px，而min-width: 768px也包含 768px → 768px 同时命中两条规则 - 设备像素比（DPR）可能导致
window.innerWidth返回 767.5px，此时max-width: 767px不匹配，但人眼无法分辨 - 推荐留 1px 间隙：前一段用
max-width: 767px，下一段从min-width: 768px开始
最容易被忽略的硬性前提
无论你怎么写 min-width 或 max-width，以下三点缺一不可：
-
<meta name="viewport" content="width=device-width, initial-scale=1">必须存在，否则移动端浏览器按 980px 渲染，所有断点失效 - 媒体查询中的单位统一用
px，别混em或rem——字体缩放会让断点漂移 - 不要依赖
!important强行覆盖媒体查询样式，它会破坏响应式层叠逻辑；改用更高特异性选择器或调整 CSS 声明顺序
真正难的不是写对语法，而是想清楚：你写的每一条媒体查询，到底是在收窄能力，还是在释放能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
