直接修改 $font-size-root 会破坏响应式断点，因其导致 rem 缩放但媒体查询断点（如768px）不变，引发小屏文字过大、布局错位；正确做法是保持 $font-size-root 不变，单独重写标题等变量以维持比例协调。
直接修改 $font-size-root 会破坏响应式断点
Bootstrap 的排版比例依赖于 $font-size-root（默认 16px）和一系列基于 rem 的层级计算，比如 $h1-font-size: 2.5rem。如果只改 $font-size-root，所有 rem 值会等比缩放，但媒体查询里的断点（如 768px）不会变——导致小屏下文字反而过大、布局错位。
正确做法是保持 $font-size-root 不变，单独重写标题变量：
-
$h1-font-size: 2.25rem（原为 2.5rem） -
$h2-font-size: 1.875rem（原为 2rem） -
$h3-font-size: 1.5rem（原为 1.75rem） - 同时调整
$lead-font-size和$small-font-size以维持比例协调
用 font-size 覆盖类名时必须加 !important 吗？
不一定。Bootstrap 4+ 使用 font-size 的 specificity 是 10（如 .h1 { font-size: 2.5rem; }），而你自定义的 .custom-h1 { font-size: 2.25rem; } 只有 10，优先级相同，后加载的 CSS 生效。但如果在 Bootstrap 样式表之后引入自定义 CSS，就不需要 !important。
更稳妥的方式是提高选择器权重或使用更具体的上下文：
- 避免：
.h1 { font-size: 2.25rem !important; }（破坏可维护性） - 推荐：
body .h1 { font-size: 2.25rem; }或[data-theme="custom"] .h1 { font-size: 2.25rem; } - 注意：Bootstrap 的
.display-*类字体更大，需单独覆盖.display-1到.display-4
如何让自定义比例适配 dark mode？
Bootstrap 5.3+ 支持 data-bs-theme="dark"，但默认不改变字体大小——只调色。若要在暗色模式下调小字号（例如减少视觉重量），不能靠 media query，得用属性选择器：
body[data-bs-theme="dark"] .h1 {
font-size: 2.125rem;
}
body[data-bs-theme="dark"] .h2 {
font-size: 1.75rem;
}
关键点：
- 确保你的自定义 CSS 在 Bootstrap 主样式之后加载
- 不要用
@media (prefers-color-scheme: dark)，它无法识别 Bootstrap 的 data 属性切换 - 如果用了 Sass，可在
map-merge($theme-colors, (...))之后再定义暗色专属 typography 变量
替换 rem 为 clamp() 会影响比例一致性吗？
会，但可控。Bootstrap 原生不用 clamp()，所以直接替换标题的 font-size 值为 clamp(1.5rem, 4vw, 2.25rem) 会导致：在中等视口下实际字号偏离设计比例，且与 .lead、.small 等其他元素失去垂直节奏。
若坚持用 clamp()，必须同步重写整套比例链：
$h1-font-size: clamp(1.75rem, 4.2vw, 2.5rem)$h2-font-size: clamp(1.5rem, 3.6vw, 2rem)- 并确保所有相关组件（
blockquote、figcaption）也用对应clamp()表达式 - 测试关键断点（
576px、768px、992px）下的实际像素值是否符合预期
实际项目里，多数团队只对 .display-* 类启用 clamp()，其余保持 rem，平衡灵活性与可控性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
