最高效方案是用 @mixin respond-to($breakpoint) 配合 $breakpoints map；硬编码媒体查询易出错，map 能确保类型安全、IDE 可跳转、命名统一，且必须用 min-width 向上覆盖、配套变量同步更新。
直接用 @mixin respond-to($breakpoint) 配合 $breakpoints map，是最高效、最不易出错的方案；硬编码 @media (min-width: 768px) 看似快，改一次断点就得全局搜替换，漏一处就导致布局错乱。
为什么必须用 map 而不是变量或 list
SCSS 的 map-get($breakpoints, $breakpoint) 只接受 map 类型；传入 list（如 (576px, 768px)）会返回 null，@include respond-to("md") 直接失效。单个变量（如 $md: 768px）无法按名查值，IDE 不能跳转，协作时没人知道 $md 对应哪一层设备。
-
$breakpoints必须是 map：("sm": 576px, "md": 768px, "lg": 992px, "xl": 1200px) - 键名推荐用
"sm"/"md"，和 Bootstrap/Tailwind 对齐，别用"mobile"或"tablet"这类设备绑定词 - 值必须带单位：
576px，写成576会报Invalid null operation
@content 调用时最容易踩的三个坑
@content 是内容块注入机制，不是函数返回值，对调用语法极其敏感：
- 必须用大括号包裹：
@include respond-to("sm") { color: red; }✅；写成@include respond-to("sm"); color: red;❌（@content为空） - 不能在
@content块里再嵌套另一个带@content的@mixin，比如@include respond-to("sm") { @include hover-state { ... } }，外层媒体查询结构会丢失 -
@include必须写在 CSS 规则块内部（即有选择器后的大括号里），不能直接写在顶层或变量声明后，否则不产出任何 CSS
只用 min-width，别混用 max-width
统一用 min-width 向上覆盖，边界清晰、逻辑可控。混用 max-width 容易导致区间重叠：
立即学习“前端免费学习笔记（深入）”；
- 写
@media (max-width: 767px)和@media (max-width: 1023px)，768–1023px 区间两个都匹配，浏览器取后者——但你可能只想让这个区间单独生效 - 若真要限定区间，应写
@media (min-width: 768px) and (max-width: 1023px)，反而更啰嗦 - 桌面端样式写在默认层（无媒体查询），移动端覆盖全靠
@include respond-to("sm")往上叠加 - 别在
@mixin内部写反向断点（如max-width），它和min-width混用极易触发重叠或遗漏
断点变更时，container 宽度等配套变量必须同步更新——很多人只改了 $breakpoints 却忘了改 $container-sm 这类变量，结果栅格系统和媒体查询行为不一致，调试起来极难定位。
