bootstrap 4 默认不启用rfs，移动端字体过大是因font-size固定；可通过调整html{font-size}配合媒体查询修复，但需注意断点偏移；手写calc()需规范空格和单位，旧webview需降级；bootstrap 5默认开启rfs但仅作用于内置类。
Bootstrap 4 默认不启用 RFS，$enable-responsive-font-sizes 是 false
你看到的“移动端字体过大”，本质不是 RFS 在起作用，而是它根本没开——Bootstrap 4.3+ 虽然内置了 RFS（Responsive Font Sizes），但默认关闭。CDN 引入的 bootstrap.min.css 里所有 .h1、.display-4 都是固定值，比如 font-size: 2.5rem，不会随屏幕缩放。小屏下 2.5rem ≈ 40px，确实撑满手机视口，阅读吃力。
直接改 html { font-size } 是最快修复方式，但要注意断点错位风险
不用碰 Sass，也不用写一堆媒体查询：在 Bootstrap CSS 加载后加一段自定义样式即可：
html {
font-size: 14px;
}
@media (min-width: 576px) { html { font-size: 15px; } }
@media (min-width: 768px) { html { font-size: 16px; } }
@media (min-width: 992px) { html { font-size: 17px; } }
@media (min-width: 1200px) { html { font-size: 18px; } }
这样所有 rem 单位（包括 margin、line-height）同步缩放，排版比例不变。但注意：min-width 断点仍按原始 16px 基准计算，所以实际触发点会偏移（例如原 768px 断点，现在按 14px 基准算≈823px 视口才触发）。如果项目重度依赖断点逻辑，得手动校准。
硬塞 calc() 模拟 RFS 很容易写错，vw 和空格是两大雷区
想让标题真·响应式？可以手写 calc()，但必须避开这些坑：
-
calc(1.375rem + 1.5vw)里的+两侧必须有空格，写成calc(1.375rem+1.5vw)整条规则失效 -
vw是视口宽度百分比，vm是错的，浏览器直接忽略 - 只改
h1不够，.display-1、legend、.close这些 RFS 原本覆盖的元素也得同步，否则视觉割裂 - 安卓 4.4–6.0 WebView 对
calc()支持极差，建议降级写法：font-size: 1.5rem; font-size: calc(1.5rem + 0.8vw);
Bootstrap 5 就没这问题，但别指望它自动管你的自定义 class
Bootstrap 5 默认开启 RFS，.h1 到 .display-4 全部带 calc() 表达式，开箱即用。可它只作用于框架自带类——你写的 <p class="my-title"></p> 或直接 style="font-size: 1.5rem"，RFS 完全不干预。如果项目里重写了 $font-size-base，RFS 的基线会跟着变，但缩放系数不变，小屏下可能反而更大。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
