bootstrap 5+ 应使用 media-breakpoint-up() 等内置 mixin 而非硬写像素值，因其自动读取 $grid-breakpoints 映射表，确保与栅格系统同步；自定义断点需同步更新 $container-max-widths 等变量，并优先使用 css 自定义属性 --bs-breakpoint-* 保持全栈一致性。
Bootstrap的断点变量名怎么用，别硬写像素值
Bootstrap 5+ 已彻底移除 $screen-sm、$screen-md 这类旧版 Sass 变量，统一改用 $grid-breakpoints 映射表。直接写 min-width: 768px 不仅难维护，还会在升级时被 Sass 编译器静默忽略——因为 Bootstrap 的媒体查询逻辑全靠这个 map 驱动。
正确做法是调用内置 mixin：media-breakpoint-up()、media-breakpoint-down()、media-breakpoint-between()。它们会自动读取当前配置的断点值，保证和栅格系统同步。
- 用
media-breakpoint-up(md)生成@media (min-width: 768px) - 用
media-breakpoint-down(lg)生成@media (max-width: 991.98px)（注意是.98，防边界重叠） - 避免手写
@media (min-width: 768px)——一旦你自定义了$grid-breakpoints，它就失效了
自定义断点后，为什么你的 media query 没生效
常见错误是只改了 $grid-breakpoints，却忘了同步更新 $container-max-widths 和 $grid-columns。Bootstrap 的 media-breakpoint-*() mixin 内部依赖 $grid-breakpoints，但如果你在 JS 中通过 window.matchMedia() 手动监听，或在 CSS 中写了固定像素值，那完全绕过了这套机制。
- 检查是否在
_custom.scss中覆盖了$grid-breakpoints，但没@import "bootstrap/scss/functions"再@import "bootstrap/scss/variables" - JS 里监听断点？别用
"(min-width: 768px)"，改用matchMedia("(min-width: #{map-get($grid-breakpoints, md)})")（需在 Sass 环境中编译）或读取getComputedStyle(document.body).getPropertyValue("--bs-breakpoint-md")（Bootstrap 5.3+ 提供 CSS 变量） - 用
map-merge()扩展断点时，确保 key 是字符串（如"xxl"），不是无引号标识符，否则 mixin 查不到
移动端优先写法下，media-breakpoint-down() 的陷阱
media-breakpoint-down(xs) 会生成 @media (max-width: 575.98px)，而不是你以为的 0–575px。它实际含义是「小于下一个断点的上界」，所以 down(xs) 其实等价于 up(xs)（因为 xs 是最小断点）。真正要写「仅手机」，应该用 media-breakpoint-only(xs)（Bootstrap 5.2+ 新增）或手动组合 up(xs) + down(sm)。
-
media-breakpoint-down(sm)→(max-width: 767.98px)，覆盖 xs 和 sm 下限以下所有尺寸 -
media-breakpoint-only(md)→(min-width: 768px) and (max-width: 991.98px) - 别信文档里“down = 小于等于该断点”的直觉理解，它的计算基准永远是「下一个断点减 0.02px」
CSS-in-JS 或 Tailwind 用户，别重复造轮子
如果你项目里已用 styled-components 或 Emotion，直接复用 Bootstrap 的断点值反而容易脱节。更稳妥的是提取其 CSS 自定义属性：Bootstrap 5.3 开始导出 --bs-breakpoint-xs 到 --bs-breakpoint-xxl，可在 JS 中读取。
- CSS 中用
@media (min-width: var(--bs-breakpoint-md)) - JS 中用
getComputedStyle(document.documentElement).getPropertyValue("--bs-breakpoint-lg") - Tailwind 用户不必模仿 Bootstrap 断点——两套系统独立维护，强行对齐只会让
md:和sm:含义错位
断点不是写死的数字，是设计系统的一致性契约。改一个值，得确认 Sass 变量、CSS 变量、JS 监听、甚至设计稿标注全同步——漏掉任意一环，响应式就变成玄学。
