RFS 默认缩放区间为1200px至∞，小屏无变化因低于断点即锁定最小字号（约1rem）；需提前声明$rfs-breakpoint: 768px和$rfs-minimum-font-size: 14px并置于@import前生效。
RFS 默认缩放区间为什么小屏没变化
bootstrap 5 的 rfs 默认只在 1200px 及以上视口才开始缩放，小于该宽度时直接锁定为最小字号（约 1rem）。所以你在手机上看到 h1 始终是 2.5rem 或更小却没继续缩小，不是 bug，是默认行为。
常见错误现象：写了 font-size: font-size(2.5rem)，但 iPhone 上字体和 iPad 一样大，误以为 RFS 没生效。
- 根本原因是
$rfs-breakpoint默认为1200px，它定义的是「缩放启动点」，不是「上限」 - 想让缩放从
768px就开始，需在@import "bootstrap"前设置：$rfs-breakpoint: 768px; - 若项目大量使用平板尺寸，建议设为
992px，避免在 iPad Pro 等设备上卡在临界点
如何调低 RFS 最小字号避免小屏文字过小
RFS 缩放有下限，默认最小值是 1rem（≈16px），但某些设计稿要求正文在手机上至少 14px，否则可读性差。直接改 $font-size-base 不行——它会影响所有基于 rem 的间距、行高，破坏排版比例。
正确做法是覆盖 RFS 专属变量：
- 在自定义 Sass 文件顶部设置：
$rfs-minimum-font-size: 14px; - 这个值会被自动转为
rem单位参与计算，无需手动除以根字号 - 注意：它只影响被
font-size()包裹的声明，对原生.fs-4类或直接写的font-size: 1.25rem无效
为什么改了 $rfs-breakpoint 却没立刻生效
最常踩的坑是变量位置错了。RFS 相关变量必须在 @import "bootstrap/scss/functions" 之前声明，且绝对不能放在 @import "bootstrap" 之后。
典型错误写法：
@import "bootstrap"; $rfs-breakpoint: 768px; // ❌ 太晚，已被 bootstrap 内部读取并缓存
正确顺序：
$enable-responsive-font-sizes: true; $rfs-breakpoint: 768px; $rfs-minimum-font-size: 14px; @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; // ...其余
如果你用的是 Bootstrap 官方构建流程（如通过 bootstrap.scss 入口），变量必须出现在第一行有效代码前，CSS 文件里写这些完全无效。
组件内字体不响应 RFS 怎么办
像 .table、.alert、.card 这些组件的字体大小由独立 Sass 变量控制（如 $table-font-size），它们默认没被 font-size() 包裹，所以即使你全局开了 RFS，表格文字也不会缩放。
解决方法不是加 CSS 类，而是重定义变量：
- 写
$table-font-size: font-size(0.875rem);而不是.table { font-size: font-size(0.875rem); } - 同理处理
$alert-padding-y、$card-title-font-size等，只要变量名带-font-size后缀，基本都需要手动包裹 - 别漏掉
$h1-font-size等标题变量——它们虽被内置类使用，但如果你自己写h1标签，仍需确保变量已包裹
RFS 的缩放逻辑藏在 calc 表达式里，一旦变量没进函数，编译后就是纯静态值，再怎么调断点也白搭。
