直接写 max-width 媒体查询易失控，因设备尺寸是连续区间而非离散点；硬编码断点会导致重叠或遗漏，应按内容需求定义语义化断点，用 Sass Map 管理 min/max 范围，并确保边界无缝衔接。
为什么直接写 max-width 媒体查询容易失控
因为设备尺寸不是离散点，而是连续区间；硬编码多个断点（比如 768px、1024px）会导致样式重叠或遗漏，尤其在平板横竖屏切换、折叠屏、高 DPR 设备上，@media (max-width: 768px) 可能同时命中 iPad Pro 横屏和小尺寸安卓平板，但它们的可用宽度和交互逻辑完全不同。
- 别用固定像素值覆盖所有场景，比如
768px对应“平板”，实际 iPad 竖屏是768px，横屏是1024px，而某些 Android 平板竖屏可能是800px - 优先按内容容器需要的最小宽度来定义断点，而不是设备型号
- Sass Map 不是用来替代媒体查询的，而是帮你把「语义化尺寸名」映射到一组可维护的数值范围
$breakpoints Map 的键名该用设备还是用途
用用途。比如 sm、md、lg 这类命名无法传达设计意图，换成 mobile、tablet-portrait、tablet-landscape、desktop 更易协作，也方便后续扩展（比如加 foldable-half）。
- 键名必须小写、短横线分隔，避免 Sass 解析歧义：用
tablet-landscape，不用tabletLandscape或TabletLandscape - Map 值推荐用 map，不是 list：每个尺寸对应一个
(min: ..., max: ...)结构，而非单个像素值 - 示例定义：
$breakpoints: ( mobile: (min: 0, max: 479px), tablet-portrait: (min: 480px, max: 767px), tablet-landscape: (min: 768px, max: 1023px), desktop: (min: 1024px, max: null) );
如何用 breakpoint-between() 生成不重叠的媒体查询
手动拼 @media (min-width: ...) and (max-width: ...) 容易漏掉边界或写反方向，Sass 函数封装后，只要传入 Map 键名就能安全输出。
- 函数内部需处理
max: null场景，转为max-width: none或省略max-width条件 - 注意
min和max是包含关系，tablet-portrait的max: 767px必须比tablet-landscape的min: 768px小 1px，否则中间有 1px 缝隙 - 调用示例：
@include breakpoint-between(tablet-portrait) { .sidebar { display: none; } }
为什么 @media 里嵌套 @include 会失效
因为 Sass 的 @media 规则在编译时已确定作用域，如果在其中调用含 @media 的 mixin（比如另一个断点函数），会导致嵌套媒体查询，浏览器不识别这种语法。
立即学习“前端免费学习笔记（深入）”；
- 所有断点 mixin 必须在顶层或选择器下直接使用，不能出现在已有
@media块内 - 如果要组合条件（比如「桌面 + 高对比度」），用
and手动拼，不要试图嵌套 mixin - 检查编译后 CSS 是否出现
@media (min-width: 768px) { @media (prefers-reduced-motion: reduce) { ... } }—— 这种就是嵌套错误
max 边界的连续性校验：改一个断点的 max，必须同步检查下一个断点的 min 是否衔接，否则某段宽度会无样式匹配。Map 本身不保证这点，得靠人工或额外脚本验证。 
