直接修改 :root 的 font-size 是唯一可靠方式，bootstrap 5 所有文本层级和间距均基于此计算，改后自动等比缩放；必须确保其 css 在 bootstrap.min.css 之后加载，且需手动处理 border、box-shadow、letter-spacing 等非 rem 值，并用 --bs-scale 配合 calc 实现局部缩放。
直接改 :root 的 font-size 是唯一可靠方式
Bootstrap 5 所有文本层级（h1 到 h6、.lead、p）和间距（margin-bottom、padding）都基于 :root 的 font-size 计算。改它，整个排版比例自动等比缩放，不崩结构、不破响应式。
常见错误是写 html { font-size: 18px; } 或 body { font-size: 18px; }——前者在 SSR 场景易被重置，后者组件样式根本不继承，结果全无效。
必须用：
:root {
font-size: 18px;
}
改完后：h1（2.5rem → 45px）、p 的 margin-bottom: 1rem（→ 18px）、.btn 的 padding: 0.375rem（→ 6.75px）全部同步变化。
--bs-font-size-base 变量不能单独改
这个变量只是 Bootstrap 内部读取的“快照”，它由 :root 的 font-size 初始化，但不反向控制它。你写 :root { --bs-font-size-base: 18px; } 完全没用——所有 rem 值仍按原始 16px 算。
验证方法：DevTools → Elements → 选任意 p → Computed → 查 margin-bottom，如果还是 16px，说明 :root font-size 没生效，不是变量写错了，而是加载顺序或作用域问题。
确保你的 CSS 文件（含 :root 块）在 bootstrap.min.css 之后引入；如果是内联 <style></style>，也得放在 Bootstrap 的 <link> 后面。
动态缩放时必须同步处理 line-height 和硬编码值
改 :root font-size 后，line-height: 1.5 这类无单位值会自动撑开（因乘的是当前元素字号），但以下几类不会动，必须手动补：
-
border-width: 1px→ 改成border-width: calc(1px * var(--bs-scale, 1));，并配合 JS 设置--bs-scale -
box-shadow: 0 2px 4px rgba(0,0,0,.1)→ 模糊半径和偏移需按比例缩：box-shadow: 0 calc(2px * var(--bs-scale, 1)) calc(4px * var(--bs-scale, 1)) rgba(0,0,0,.1); -
letter-spacing: 0.05em→ 改用0.05rem更稳，因 em 依赖父级字号，而 rem 始终锚定根字号
漏掉这些，缩放后按钮边框变粗、阴影发虚、字距失调，视觉上就“脱节”了。
不同容器独立缩放要避免污染全局 :root
如果需要某个区域（如弹窗、打印预览）单独缩小到 80%，不能直接改 :root font-size，否则全站字体跟着变。正确做法是：
给容器加自定义属性：<div class="print-view" style="--bs-scale: 0.8;">
<p>再用 CSS 覆盖该容器下所有 rem 基准：</p>
<pre class="brush:php;toolbar:false;">.print-view {
font-size: calc(16px * var(--bs-scale, 1));
}
.print-view * {
font-size: inherit;
}</pre>
<p>关键点：只在该容器内重设 <code>font-size，不碰 :root；所有子元素显式继承，防止某些组件（如 .form-select）忽略上下文。
这种隔离写法才能让多个缩放区域互不干扰——比如一个报表页缩 0.75x，另一个帮助文档保持 1x，各自干净。
