Bootstrap 4 需手动启用 RFS：在 SCSS 入口文件中设置 $enable-responsive-font-sizes: true; 并重新编译；CDN 版本不支持直接启用，仅能模拟。
Bootstrap 4 怎么启用 RFS 响应式字体
rfs（responsive font sizes）是 bootstrap 4.3+ 内置的响应式字体方案，但它默认是关闭的——你直接 link cdn 的 css 文件，$enable-responsive-font-sizes 就是 false，所有 .h1、.display-4 等类都不会自动缩放。
必须自己编译 SCSS 才能真正启用：
- 在自定义 SCSS 入口文件顶部，加一行：
$enable-responsive-font-sizes: true; - 确保它出现在
@import "bootstrap/scss/functions";和@import "bootstrap/scss/variables";之后、@import "bootstrap/scss/bootstrap";之前 - 用 Sass 编译器（如 Dart Sass）重新生成 CSS，CDN 引入的版本无法绕过这步
不编译就硬塞 CSS 规则？可以，但只是“模拟”，不是真 RFS，比如 calc(1.375rem + 1.5vw) 在小屏下可能缩得过小，且不会随视口连续平滑变化。
不用编译 SCSS 时怎么手动写响应式字体
如果你用的是 CDN 或不想碰构建流程，就得手写媒体查询 + calc() 组合，核心是用 vw 单位做视口宽度比例，再叠加固定 rem 基底。
例如适配主流断点：
/* 加在 Bootstrap CSS 之后的自定义样式里 */
@media (max-width: 1200px) {
h1, .h1 { font-size: calc(1.375rem + 1.5vw); }
.display-2 { font-size: calc(1.675rem + 5.1vw); }
}
@media (max-width: 768px) {
h1, .h1 { font-size: calc(1.25rem + 1.2vw); }
.display-2 { font-size: calc(1.5rem + 4.2vw); }
}注意两点：
-
vw是视口宽度的 1%，100vw = 屏幕宽度；别和vm（不存在）、vh混，浏览器不认vm -
calc()里不能有空格（如1rem+1vw错，1rem + 1vw对），否则整条规则失效 - 别只改
h1，记得同步处理.display-*、legend、.close等 RFS 覆盖的元素，否则视觉割裂
Bootstrap 5 的响应式字体要不要额外配置
Bootstrap 5 默认就启用了 RFS，$enable-responsive-font-sizes 默认为 true，而且标题类（h1–h6、.display-*）全部内置了 calc() 表达式，无需手动开启或重写。
但要注意：
- 它只作用于 Bootstrap 自带的排版类，你写的
p、span或自定义 class 不会自动响应 - 如果项目里覆盖了
$font-size-base，RFS 的基线会跟着变，但缩放系数不变，可能导致小屏下文字偏大 - 某些旧安卓 WebView（Android 4.4–6.0）对
calc()支持不稳定，font-size可能回退为初始值，建议加一层降级：font-size: 1.5rem; font-size: calc(1.5rem + 0.8vw);
移动端字体太大/太小的常见修复场景
典型现象：PC 上正常，手机一打开 h1 占满半屏，或文字糊成一团看不清——这不是 RFS 问题，而是 viewport 设置或根字体失控。
先检查这几处：
-
<meta name="viewport" content="width=device-width, initial-scale=1">缺失或写错（比如漏了initial-scale=1） -
html或body被设了固定font-size（如font-size: 20px），会覆盖 RFS 的rem基准 - 用了
transform: scale()或zoom缩放整个页面，导致字体计算失真 - 某些 iOS Safari 在横屏切换时缓存了错误的
vw值，可加body { font-size: 16px; }强制重置
RFS 是个好工具，但它依赖视口真实宽度和 rem 基准稳定。一旦 viewport 或根字体被干扰，所有 calc() 都会跑偏——这点最容易被忽略。
