用逗号分隔媒体查询是“或”关系，导致断点重叠；正确写法是用and连接实现闭合区间，如@media (min-width: 480px) and (max-width: 768px)，并推荐min-width升序排列、统一变量管理及显式重置伪元素样式。
为什么用逗号分隔的媒体查询会导致断点重叠
写成 @media (min-width: 480px), (max-width: 768px) 是“或”关系，不是“从480到768”的区间。浏览器会分别判断两个条件，只要满足其一就应用样式——结果是 320px 宽度（满足后者）和 1200px 宽度（满足前者）都会命中，完全失控。
真正表达闭合区间的唯一方式是用 and 连接：@media (min-width: 480px) and (max-width: 768px) 才表示「480px ≤ 视口宽度 ≤ 768px」。
- 不写
and，浏览器当作两个独立查询处理，语义断裂 - 移动端调试时若发现某元素在 768px 宽度下忽隐忽现，大概率是用了逗号而非
and - 旧版 Safari 或某些安卓 WebView 对逗号分隔的支持更不稳定，容易漏掉边界
相邻断点之间如何避免间隙或重叠
像素不是整数切片：缩放 110% 时，768px 设备可能报告 698.18px；横竖屏切换也可能触发非整数宽度。靠 max-width: 768px 和 min-width: 769px 拼接，中间必然存在未覆盖的浮点区间。
推荐两种稳妥做法：
- 统一用
and区间，例如：@media (min-width: 480px) and (max-width: 768px)+@media (min-width: 768.5px) and (max-width: 1024px) - 采用左闭右开惯例：前一个断点用
max-width: 479.98px，后一个从min-width: 480px开始，避开浮点精度抖动 - 所有断点变量必须集中定义在 CSS 自定义属性或预处理器变量里，避免散落在各处硬编码
为什么优先用 min-width 升序排列而不是 max-width
min-width 更符合渐进增强逻辑：默认样式面向小屏，再逐级向上增强。而 max-width 是降级思路，容易在宽屏设备上因遗漏某层导致样式崩塌。
更重要的是，min-width 天然形成非重叠区间：
- 视口宽度 0–767px：只匹配基础样式（无查询）
- 768–1023px：仅匹配
@media (min-width: 768px) - 1024px+：两个查询都匹配，但后声明的
@media (min-width: 1024px)会覆盖前者中重复定义的属性 - 若反过来写（大断点在前），小断点无法有效覆盖，还可能因选择器权重不足被忽略
媒体查询加载顺序引发的伪元素样式叠加
当多个外部样式表通过 <link> 加载并共用 max-width 条件时，比如：<link media="screen and (max-width: 992px)"> 和 <link media="screen and (max-width: 768px)">，在 768px 下两者都会生效——computer.css、tablet.css、smartphone.css 全部加载。
此时 CSS 层叠规则起效，但伪元素（如 ::before、:hover）的样式不会自动清空未覆盖的属性。例如 computer.css 定义了 border-top 和 padding-top，而 smartphone.css 只改了 border-bottom，那前两者仍保留，造成意料外的叠加效果。
解决关键：
- 改用单一样式表 +
@media块内聚管理，避免跨文件层叠干扰 - 每个断点内只写「该区间需要变更」的属性，不要依赖“未声明即清空”
- 对伪元素样式，显式重置不需要的属性，比如加
border-top: none或padding-top: 0
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
