直接改:root的font-size是最有效的方式，Bootstrap 5+所有rem单位（padding、margin、font-size）均基于此计算；需配合CSS变量动态缩放，并手动重置border-width、box-shadow等硬编码px值。
直接改:root的font-size是最有效的方式
Bootstrap 5+ 所有 rem 单位（包括 padding、margin、font-size）都基于 :root 的 font-size 计算。动态缩放排版，核心就是让这个基准值可变。
实操建议：
- 在父容器上设自定义属性，例如：
<div class="theme-scale" style="--bs-scale: 0.8;"> - 覆盖根字号：
:root { font-size: calc(16px * var(--bs-scale, 1)); } - 确保你的 CSS 文件或
<style>标签加载在bootstrap.min.css之后，否则变量不会被识别 - 不要用
!important——Bootstrap 5.3+ 的 CSS 自定义属性本身支持级联，普通声明即可生效
--bs-body-font-family能统一换字体，但不控制大小
这个变量只影响字体栈，比如把系统默认换成 "Inter", sans-serif，所有依赖它的组件（.btn、.form-control 等）会同步更新。但它不改变字号，也不触发缩放逻辑。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 只改了
--bs-body-font-family，发现文字没变大也没变小 - 同时写了
--bs-body-font-size—— 这个变量并不存在，Bootstrap 5 官方未提供该自定义属性 - 试图用它控制图标字体大小 —— Bootstrap Icons 的渲染依赖
font-size+font-family: 'bootstrap-icons'，仅改字体栈无效
缩放后哪些地方必须手动重置？
不是所有样式都响应 rem。硬编码像素值（px）在缩放后会“脱节”，导致视觉失衡。
必须检查并按比例调整的典型项：
-
.btn的border-width：默认1px，需写成calc(1px * var(--bs-scale, 1)) -
.form-check-input::before和::after的width/height/border：原生 checkbox 不响应rem，伪元素尺寸必须显式缩放 -
box-shadow的模糊半径和偏移量：例如box-shadow: 0 2px 4px rgba(0,0,0,0.1)→ 改为calc(2px * var(--bs-scale, 1))等 -
line-height若写死数值（如1.2）通常没问题，但若写成1.2rem就会随根字号放大，可能造成行距过大
为什么transform: scale()不适合全局排版缩放？
它只是视觉拉伸，不改变文档流、不触发布局重排，会导致一系列副作用：
- 点击热区错位：元素视觉放大了，但实际事件坐标没变，按钮边缘点不中
- 文字发虚：尤其是 Chrome 下 subpixel 渲染失效，小字号图标或细体字边缘模糊
- 与栅格系统冲突：
.col宽度是计算出来的百分比，scale()会让内容溢出或挤压相邻列 - 无法响应屏幕旋转或窗口 resize 动态调整 —— 它是静态变换，不是 CSS 变量驱动的响应式计算
真正可控的缩放，始终围绕 :root 的 font-size 和配套的 CSS 变量展开；其他方式都是补救，不是主线。
