直接改 :root 的 font-size 是唯一可靠方式，因 bootstrap 5 所有 rem 尺寸均依赖它，改 html 或 body 无效；需确保自定义 css 在 bootstrap.min.css 后加载，并注意仅影响 rem 值。
:root` 的 `font-size` 是唯一可靠方式，其他操作基本无效或不可控。
为什么必须动 :root 而不是 html 或 body
Bootstrap 5 所有基于 `rem` 的尺寸（包括 `h1`、`p` 的 `margin-bottom`、`.btn` 的 `padding`）都依赖 `:root` 下的 `font-size` 值，它同时也是 CSS 变量 `--bs-font-size-base` 的来源。改 `body` 完全没用——组件样式根本不继承；改 `html` 在 SSR 场景或旧浏览器中容易被重置。只有 `:root` 是官方约定且优先级最高的锚点。
怎么写才真正生效
确保你的自定义 CSS 文件在 `bootstrap.min.css` 之后 加载，并写成：
:root {
font-size: 18px;
}
常见失效原因：
- 自定义 `
:root` 块写在 `bootstrap.min.css` 之前引入 → 被覆盖 - 写了 `
html { font-size: 18px !important; }` → 无效，因组件不继承 - 项目用 Sass 编译，但只改了 `$font-size-base` 变量，忘了同步更新编译后 CSS 中的 `
:root` 块 → 实际生效的仍是原始值
改完哪些会变、哪些不会
它只影响所有用 `rem` 表达的尺寸，不触碰像素值、百分比或固定 `em`。
- ✅ 会变：`
h1`（`2.5rem` → `45px`）、`.lead`（`1.25rem` → `22.5px`）、`p` 的 `margin-bottom: 1rem`（→ `18px`）、`.pagination-lg` 的字号 - ❌ 不会变：`.text-muted` 的 `
color`、手动写的 `border-radius: 4px`、所有 `px` / `%` 值 - ⚠️ 需额外处理：如果你某处写了 `
line-height: 24px`，就得改成无单位值（如 `line-height: 1.333`），否则就锁死了
移动端单独微调的注意事项
如果只想在小屏下略大一点（比如 `576px` 以下用 `19px`），不要在媒体查询里重复设 `:root` —— 这会和 Bootstrap 响应式断点冲突，导致意外缩放。更稳妥的做法是：只设一个全局 `:root`，再用 `fs-*<code>` 类或局部 `<code>font-size` 覆盖关键区域。例如表格或卡片标题需要更大，就加 `fs-5`，而不是改根字号再倒推。
