<p>RFS 是 Bootstrap 内置的响应式字体系统，非自动缩放，需显式启用并配合 font-size() 函数或 fs-* 类（带断点后缀）才生效；默认仅作用于内置类，缩放区间从 1200px 开始，小屏锁定最小字号约 1rem。</p>
Bootstrap RFS 是什么，它真能自动缩放字号吗
RFS（Responsive Font Sizes）是 Bootstrap 内置的响应式字号系统，但它不是“自动”缩放——它靠预设的断点和缩放公式生成一组 font-size 值，并编译进 CSS。你得显式启用它，且只对使用了 font-size 工具类（如 fs-1～fs-6）或自定义 font-size 的元素生效。没加类、没写 font-size 属性的文本，RFS 完全不干预。
怎么开启 RFS 并控制缩放范围
默认情况下，Bootstrap 5.3+ 的 RFS 是启用的，但缩放行为受两个 Sass 变量控制：$rfs-base-font-size 和 $rfs-breakpoint。如果你发现字号没变小/变大，大概率是没改对变量位置，或用错了编译方式：
- 必须在导入 Bootstrap 主 SCSS 文件前，重定义这些变量（比如在你的
_custom.scss中） -
$rfs-breakpoint默认是1200px，意味着只在视口 ≥1200px 时才开始“放大”，小于该值反而会缩小——这点常被误认为“失效” - 想让缩放更激进？调低
$rfs-scale-factor（默认 1.067），比如设为1.03，变化会更平缓；设为1.15，小屏下缩得更明显 - 若完全禁用 RFS，设
$enable-responsive-font-sizes: false即可，所有fs-*类退化为固定字号
为什么 fs-4 在手机上反而比桌面还大
这是 RFS 公式导致的典型反直觉现象：它按“基础值 + 断点增量”计算，而非线性缩放。例如默认 fs-4 基础是 1.25rem（20px），在 sm（576px）以下，RFS 会把它放大到约 1.32rem，因为公式优先保证小屏可读性。常见误操作包括：
- 直接给元素写内联
style="font-size: 1.25rem"—— RFS 不处理内联样式 - 用
text-sm这类旧版工具类（Bootstrap 5 已移除），它们不走 RFS 流程 - 在 JS 里动态改
className但漏掉了fs-*，比如只加fw-bold - 用了
vw单位（如font-size: 4vw）——这和 RFS 无关，是纯 CSS 视口单位，两者混用容易冲突
不用 Sass 编译时如何手动模拟 RFS 效果
如果项目用 CDN 或已编译 CSS，无法改 Sass 变量，就只能手动补媒体查询。RFS 实际生成的规则类似这样：
@media (min-width: 1200px) {
.fs-4 {
font-size: 1.25rem !important;
}
}
@media (max-width: 1199.98px) {
.fs-4 {
font-size: clamp(1.15rem, 1.2rem + 0.2vw, 1.25rem) !important;
}
}
要点：
-
clamp()是核心，三参数分别是最小值、首选值（含vw）、最大值 - 别直接抄 Bootstrap 编译出的数值——不同版本公式系数不同，建议用官方 RFS 工具在线生成：https://www.php.cn/link/eee40f86719186a7cd1d142b76539e5e
- 手动加时务必带
!important，否则容易被 Bootstrap 原有规则覆盖
RFS 的复杂点不在配置，而在理解它“保小屏可读性优先”的设计逻辑——它不是为追求视觉一致性而生，而是为解决移动端文字过小、需用户双指放大的实际问题。忽略这点，很容易把“缩放”当成“等比缩放”来调试。
