必须用 and 连接 min-width 与 max-width 才能定义闭合区间，如 @media (min-width: 480px) and (max-width: 768px) 表示 480px ≤ 宽度 ≤ 768px；逗号表示“或”，易导致样式失控；相邻断点需首尾相接并考虑浮点精度，推荐左闭右开或统一用 and 区间。
min-width 和 max-width 单独用容易漏掉边界，重叠常发生在断点交界处——比如 @media (max-width: 768px) 和 @media (min-width: 769px) 之间没覆盖 768.5px 这类视口宽度，浏览器按像素取整后可能同时命中或都不命中。必须用逻辑运算符组合出无间隙的范围。
用 and 连接 min-width 与 max-width 确保区间闭合
单个断点声明无法定义“从 A 到 B”的完整区间，and 是唯一能表达“且”的 CSS 媒体查询逻辑运算符。不写 and，浏览器会当作两个独立条件处理，语义断裂。
-
@media (min-width: 480px) and (max-width: 768px)才真正表示「480px ≤ 宽度 ≤ 768px」 - 写成
@media (min-width: 480px), (max-width: 768px)是“或”关系，会导致样式在 320px（满足后者）和 1200px（满足前者）都生效，完全失控 - 移动端调试时若发现某元素在 768px 宽度下忽隐忽现，大概率是用了逗号分隔而非
and
避免 max-width 与下一个 min-width 形成空隙或重叠
相邻断点之间必须首尾相接，但像素不是整数切片——视口宽度可能是小数（如缩放 110% 时 768px 设备实际报告 698.18px），所以数值设计要留余量或用非对称边界。
- 错误示范：
@media (max-width: 768px)和@media (min-width: 769px)→ 768.3px 会一个都不匹配 - 推荐写法：
@media (max-width: 768px)+@media (min-width: 769px)改为@media (max-width: 768px)+@media (min-width: 768.5px)，或更稳妥地统一用and区间 - 主流做法是让区间右开左闭：第一个断点用
max-width: 479.98px，第二个从min-width: 480px开始，避开浮点精度问题
用 not 和 only 排除干扰，不是所有设备都老老实实报宽度
某些安卓 WebView、旧版 Safari 或启用“精确触控模式”的平板，会错误报告视口宽度，或把横屏/竖屏切换当成新断点触发。这时候仅靠 min/max-width 不够。
-
@media only screen and (min-width: 768px)中的only可屏蔽不支持媒体查询的旧浏览器，避免它误读括号内样式 -
@media not all and (min-width: 1024px)可临时排除大屏干扰，用于调试小屏专属逻辑是否被意外继承 - 真机测试时若发现 iPad 横屏下图文重叠，先检查是否因
orientation: landscape未参与条件判断，单纯依赖宽度会漏掉方向维度
断点重叠最麻烦的不是写错语法，而是改了一个 max-width 没同步更新所有相关媒体查询——尤其是当多个组件各自维护自己的断点时。建议把断点变量集中定义在 CSS 自定义属性或预处理器变量里，而不是散落在各处硬编码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
