Bootstrap 5 默认断点为xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px，需通过重定义SCSS变量$grid-breakpoints生效，且须配套使用make-col-ready与make-col mixin，JS检测应读取CSS自定义属性而非硬编码值。
Bootstrap 5 默认断点在哪？breakpoints 变量必须改
Bootstrap 5 的网格断点不是写死的，而是从 SCSS 变量 $grid-breakpoints 读取的。你改了它，所有 col-md-*、row-cols-lg 这类类名的行为才会跟着变——光在 CSS 里加媒体查询没用，因为那些类根本没生成。
常见错误是直接在 HTML 里写 @media (min-width: 769px) 覆盖，结果发现 col-md-6 在 769px 依然生效（因为 Bootstrap 默认 md 是 768px），逻辑错位。
- 必须在导入 Bootstrap SCSS 前，重定义
$grid-breakpoints，比如：$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px );
- 如果你用的是 Bootstrap 官方 CDN 或已编译的 CSS，这条路走不通——得自己编译 SCSS
- 别只改一个值（比如只调大
md），否则col-sm-*和col-md-*之间可能出现空档或重叠
自定义断点类名不生效？make-col-ready 和 make-col 得配对用
想加个 col-xxs-6 类？光写媒体查询和 flex-basis 不够。Bootstrap 的列生成依赖两个核心 mixin：make-col-ready（设 padding 和 box-sizing）和 make-col（设 flex 和宽度）。漏掉前者，内边距错乱；漏掉后者，宽度不生效。
典型现象：元素看起来“卡住”在父容器边缘，或者响应后宽度突变。
- 正确写法示例（SCSS 中）：
@include media-breakpoint-up(xxs) { .col-xxs-6 { @include make-col-ready(); @include make-col(6); } } -
make-col-ready必须在make-col前调用，顺序反了会导致padding被覆盖 - 如果用了
container-fluid，还要确认xxs断点是否被container的最大宽度限制截断
JS 动态判断断点失效？别信 matchMedia 返回的 matches 初始值
用 window.matchMedia("(min-width: 768px)").matches 检测当前是否在 md 断点以上，看似合理，但容易踩坑：页面刚加载时，CSS 尚未完全应用，或用户缩放导致视口宽度抖动，matches 可能返回错误布尔值。
更麻烦的是，Bootstrap 的断点值可能已被你自定义过，而 JS 里硬编码 768px 就彻底脱节了。
- 推荐做法：把断点值从 SCSS 导出为 CSS 自定义属性，再用 JS 读取
:root { --breakpoint-md: #{map-get($grid-breakpoints, md)}; }const mdWidth = getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-md').trim(); - 监听
matchMedia时，务必用addEventListener（不是addListener，后者已废弃） - 避免在
DOMContentLoaded阶段立即读取，等load或resize后再校验一次
移动端 Safari 拖拽后断点错乱？visualViewport 尺寸和 window.innerWidth 不一致
iOS Safari 在地址栏收起/展开、键盘弹出、双指缩放时，window.innerWidth 不变，但实际可视区域（visualViewport.width）会变。这时候靠 @media 查询或 JS 判断断点，可能误判设备处于哪个断点区间。
表现就是：竖屏明明是 sm，却触发了 lg 样式；或者 col-lg-4 在 Safari 里突然变成单列。
- 关键区别：
matchMedia基于 layout viewport，visualViewport是用户真正看到的区域 - 网格布局应以 layout viewport 为准（即保持和 Bootstrap 一致），所以不要用
visualViewport做断点决策 - 若需适配键盘场景，用
resize事件 +document.activeElement判断输入框是否聚焦，单独处理，别动断点逻辑
断点的本质是设计约定，不是像素测量竞赛。改断点前先问一句：这个改动是否让所有依赖它的组件（包括第三方插件、自定义表单控件、JS 行为）都同步更新了？否则越改越散。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
