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