应统一使用 min-width 向上增强，避免混用 min-width 与 max-width 导致逻辑重叠或真空；必须限定区间时须用 and 连接，而非逗号分隔；断点应基于内容需求而非设备尺寸，并用 matchmedia 实时验证。
混合使用 min-width 和 max-width 容易导致区间断裂或意外重叠
不是语法错误，而是逻辑失控：当你在不同地方分别写 @media (max-width: 768px) 和 @media (min-width: 768px)，768px 这个宽度会同时匹配两者——浏览器不判断“归属”，只做布尔判断。结果是样式叠加、后声明的属性覆盖前声明的，但开发者往往以为它们互斥。
更隐蔽的问题是浮点精度：window.innerWidth 可能返回 768.5（比如缩放 110% 的 iPad），此时 max-width: 768px 不匹配，min-width: 768px 却匹配，中间出现“真空”；而人眼无法察觉这个像素差，调试时只能靠 matchMedia() 打印验证。
- 用
@media (min-width: 480px) and (max-width: 768px)显式定义闭合区间，比分散写两个查询更可控 - 相邻断点之间别依赖“整数对齐”，比如
max-width: 767px→min-width: 768px，实际可能漏掉767.5px - 若必须分段维护，把窄屏规则放前面、宽屏兜底放后面，降低覆盖风险
min-width 为主 + 移动优先结构天然规避重叠管理
基础样式默认适配小屏，再用 @media (min-width: 768px) 向上增强，意味着 768px 及以上才启用新规则，小屏样式不会被意外回退覆盖。这种单向扩展逻辑不需要考虑“谁该在 768px 生效”，边界归属清晰。
而 max-width 多用于降级场景（比如老 IE 或桌面端收缩适配），一旦和 min-width 混用，就容易形成“你写你的 768px 上限，我写我的 768px 下限”，最终谁生效取决于 CSS 加载顺序和选择器权重，不是设计意图。
- 所有断点统一用
min-width，从480px、768px、1024px递增，无需担心交界处重叠 - 如果真要限定区间（如仅平板竖屏），必须用
and连接，不能用逗号——@media (min-width: 480px), (max-width: 768px)是“或”，完全失控 - 单位尽量统一用
em或rem，避免缩放时 px 断点漂移
调试时别只看代码，直接验证 matchMedia().matches
光扫 CSS 文件看不出哪个媒体查询在 768px 宽度下生效。浏览器 DevTools 的 Computed 面板只显示最终值来源，但不告诉你“为什么是这条规则”。最可靠的方式是运行 JS 验证：
console.log(
matchMedia("(min-width: 480px) and (max-width: 768px)").matches,
matchMedia("(max-width: 768px)").matches,
matchMedia("(min-width: 769px)").matches
);
你会发现：同一宽度下多个查询同时为 true，或者某个本该生效的却返回 false——这说明你写的区间没真正闭合，或者设备报告了非整数值。
- 在 DevTools Rendering 面板启用
Emulate CSS media types，拖动宽度滑块实时观察断点触发时机 - 给每个媒体查询加临时标识，比如
body::before { content: "tablet-portrait"; }，一眼识别当前生效范围 - 不要依赖“我以为它该在这个宽度生效”，一切以
matchMedia返回值为准
断点不该硬编码设备尺寸，而应按内容容器需求定义
写 @media (max-width: 768px) 暗示“这是 iPad 竖屏”，但实际中：某些安卓平板竖屏是 800px，折叠屏半开可能是 672px，横屏 iPad 是 1024px——同一个设备在不同方向下会命中不同断点，甚至同一断点里混着完全不同的交互逻辑。
真正该问的是：“这个侧边栏在多宽的容器里才需要隐藏？”“这张卡片网格至少需要多少空间才能保持可读性？”。答案不是设备型号，而是内容所需的最小宽度。
- 用 Sass Map 管理语义化断点，比如
tablet-portrait: (min: 480px, max: 767px)，而非散落各处的768px - Map 值中
max设为767px，下一个min就设为768px，避免 1px 缝隙；更稳妥则用767.98px和768px - 所有断点 mixin 必须在顶层调用，不能嵌套在已有
@media块内，否则编译出非法嵌套媒体查询
and 写闭合区间，或干脆放弃 max-width，只用 min-width 向上增强。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
