CSS逻辑运算符精确控制响应式断点重叠

响应式布局中的断点重叠问题，是前端开发中常见的难点之一。在写媒体查询时，断点边界处理不当，样式在某个宽度下突然失效或被覆盖，排查起来相当耗时。

核心原因在于 min-width 和 max-width 单独使用容易遗漏边界。例如 @media (max-width: 768px) 定义一组样式，@media (min-width: 769px) 定义另一组，看似完整，但实际运行中，屏幕缩放或浏览器像素取整可能导致 768.5px 这样的宽度落入“无人区”。像素取整问题可能引发多种边界状况。

解决问题的关键在于正确使用逻辑运算符。不加 and，浏览器的解析结果可能与预期不同。

用 and 连接 min-width 与 max-width 确保区间闭合

单一断点声明无法定义“从A到B”的完整区间。and 是 CSS 媒体查询中唯一表示“且”的运算符。如果不使用它，浏览器会将两个条件视为独立，导致语义断裂。

• 标准写法：@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，此时769px断点可能直接跳过，完全不匹配。

• 错误示范：@media (max-width: 768px) 和 @media (min-width: 769px) → 768.3px 两边都不匹配，出现空白。
• 推荐做法：改写为 @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 自定义属性或预处理器变量中，避免硬编码散落各处。