min-width 和 max-width 同时出现时无优先级之分，浏览器会同时应用所有匹配的规则，后声明的同名属性覆盖先声明的；重叠查询需通过开发者工具验证实际生效值。
min-width 和 max-width 同时出现时，谁优先？
媒体查询没有“优先级”概念，只有匹配逻辑：只要条件为 true，样式就生效。当多个查询范围重叠（比如 @media (min-width: 480px) 和 @media (max-width: 768px)），它们不是互斥的——浏览器会同时应用所有匹配的规则，后声明的样式会覆盖先声明的同名属性。
所以重叠本身不报错，但容易导致意料外的样式叠加或覆盖。关键不是“谁赢”，而是“哪些规则同时起作用”。
- 检查开发者工具的 Computed 面板，看最终生效的值来自哪条规则
- 避免靠“顺序”隐式控制逻辑，显式用单个查询限定区间更可靠
- 如果必须分段写，把更具体的范围（如窄屏）放在前面，宽屏兜底放后面，降低覆盖风险
写 (min-width: 480px) and (max-width: 768px) 真的安全吗？
语法上完全合法，但存在两个易被忽略的边界陷阱：
-
max-width: 768px包含恰好768px宽度的视口，而min-width: 769px才开始下一个断点——中间没有空隙，但768px会同时匹配max-width: 768px和min-width: 768px查询（如果后者存在） - 设备像素比（dpr）可能导致
window.innerWidth返回非整数值（如768.5），此时max-width: 768px不匹配，但人眼看不出区别——这不是 bug，是 CSS 媒体查询基于 CSS 像素的规范行为 - 建议统一使用
em或rem单位替代px，规避部分缩放场景下的边界抖动
移动端适配中，min-width 比 max-width 更常用的原因
现代响应式策略普遍采用移动优先（mobile-first），核心逻辑是：基础样式默认适配小屏，再用 min-width 逐级增强。这种写法天然规避了重叠管理问题：
立即学习“前端免费学习笔记（深入）”；
-
@media (min-width: 480px) { ... }只向上扩展，不会回退影响已定义的小屏样式 -
max-width多用于旧项目“桌面优先”降级，或针对特定老设备（如 IE）做收缩适配 - 混合使用时，
min-width查询应放在max-width之前，否则小屏设备可能被宽屏规则意外覆盖
调试重叠查询最有效的三个方法
别只盯着代码猜，直接看运行时表现：
- 在 DevTools 的 Rendering 面板中启用
Emulate CSS media types，手动拖动宽度观察断点触发时机 - 给每个媒体查询块加临时
body::before { content: "480+"; }类标识，一眼识别当前生效的范围 - 用 JavaScript 打印匹配状态：
matchMedia("(min-width: 480px) and (max-width: 768px)").matches，验证是否符合预期
重叠本身不可怕，可怕的是以为它自动互斥。真正要盯紧的，是那些没写 !important 却被后续规则悄悄覆盖掉的属性，尤其是 font-size、padding 和 display 这类易受层级影响的样式。
