必须用 :root { font-size: 18px; }，因bootstrap 5所有rem尺寸（h1、p的margin-bottom、.btn内边距）及css变量--bs-font-size-base均依赖:root；改body无效（组件不继承），改html在ssr或旧浏览器中易被重置。
直接改 :root { font-size: 18px; } 就行，其他方式基本无效或不可靠。
为什么必须用 :root 而不是 html 或 body
Bootstrap 5 所有基于 rem 的尺寸（包括 h1、p 的 margin-bottom、.btn 的内边距）都依赖 :root 下的 font-size 值，它同时也是 CSS 变量 --bs-font-size-base 的来源。改 body 完全没用——组件样式根本不继承它；改 html 在部分 SSR 场景或旧浏览器里可能被重置。只有 :root 是 Bootstrap 官方约定且优先级最高的锚点。
常见错误现象：
- 写了
html { font-size: 18px; }，但.pagination-lg字号没变 - 在 JS 里读
getComputedStyle(document.documentElement).fontSize，返回的还是16px
:root { font-size: ... } 改了之后哪些会变、哪些不会
它只影响所有用 rem 表达的尺寸，不触碰固定像素值、百分比或 em（除非父级也用 rem）。关键看 Bootstrap 内部是否基于该根字号推导：
- ✅ 会变：
h1（2.5rem→45px）、.lead（1.25rem→22.5px）、p的margin-bottom: 1rem（→18px）、.btn的padding（默认用0.375rem） - ❌ 不会变：
.text-muted的color、手动写的border-radius: 4px、所有px/%值 - ⚠️ 需额外处理：
line-height默认是无单位值（如1.5），它乘的是当前元素的font-size，所以会自动撑开；但如果你写了line-height: 24px，就得改成line-height: 1.333这类无单位值，否则就锁死了
为什么改了 :root 页面却没反应
不是代码无效，而是加载顺序或覆盖逻辑出问题：
- 自定义 CSS 文件（含
:root块）放在bootstrap.min.css之前引入：浏览器先读 Bootstrap 的:root，再读你的，结果被覆盖。必须确保<link rel="stylesheet">顺序是 Bootstrap 在前、你的 CSS 在后 - 用了
!important强制font-size却没加在:root上，比如写body { font-size: 18px !important; }：无效，因为组件不继承 - 项目用了 Sass 编译，但你在自定义变量里改了
$font-size-base却忘了同步更新:root块——编译后 CSS 里的:root还是原始值
别踩这些坑：常见误操作
全局字体缩放不是“调大一点就行”，容易忽略的细节往往导致排版崩坏：
- 在媒体查询里重复设
:root { font-size: ... }：可能和 Bootstrap 响应式断点冲突，尤其在小屏下出现意外缩放 - 只改
font-size却漏掉line-height和margin：比如把p拉到18px，但margin-bottom: 1rem没变，视觉间距就显小；或者h1改成48px后没调line-height，文字发紧 - JS 动态修改了
document.documentElement.style.fontSize，但后续又触发了框架重绘（比如某些 UI 库初始化），导致值被重置
