Bootstrap 5.3+默认启用RFS，仅原生类（如.h1、.lead）自动响应式缩放；自定义类需手动用font-size()函数或calc()实现，组件及第三方插件字体须单独干预。
Bootstrap 5 默认启用 RFS，但你写的 class 不会自动响应
Bootstrap 5.3（含）起，$enable-responsive-font-sizes 默认为 true，所有内置标题类（如 .h1、.display-4）和排版类（.lead、.small）已用 font-size() 包裹，生成带 calc() 的响应式规则。但这是“仅限框架自带类”——你自定义的 div.title、p.intro 或第三方组件内文字，不会因此变小。
常见错误现象：.h1 在小屏缩到了 1.2rem，但你自己写的 <h1 class="my-header"></h1> 还是固定 2.5rem，视觉割裂。
- 别指望加个
class="h1"就能继承响应逻辑——它只对 Bootstrap 原生类生效 - 想让自定义元素响应，必须手动用
font-size: font-size(2rem);（仅 Sass 编译项目）或手写calc()（CDN 项目） - Bootstrap 5 的 RFS 默认缩放区间是
1200px → ∞，小于 1200px 就锁死在最小值（约1rem），不是全范围平滑缩放
Bootstrap 4 必须手动开启 RFS，且 CDN 版本完全无效
Bootstrap 4.3+ 虽然内置 RFS，但默认 $enable-responsive-font-sizes: false。你在 HTML 里 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">，哪怕升级到 4.6.2，.h1 仍是固定字号——RFS 是 Sass 编译期能力，不是运行时 JS 补丁。
要真正启用，必须：
- 在自定义
_custom.scss顶部设置$enable-responsive-font-sizes: true;，且位置必须在@import "bootstrap/scss/functions";和@import "bootstrap/scss/variables";之后、@import "bootstrap/scss/bootstrap";之前 - 用 Dart Sass 或 Node Sass 重新编译，生成自己的 CSS 文件
- 若用 Ruby on Rails +
bootstrapgem，确认 gem ≥ 4.3.1 且项目走.scss引入路径，而非直接require "bootstrap"
硬塞 CSS 规则（如 h1 { font-size: calc(1.375rem + 1.5vw); }）只是模拟，不触发 RFS 的断点分级、系数校准和最小字号保护机制。
RFS 的 font-size() 函数不是万能缩放器，参数和单位很关键
font-size(20px) 中的 20px 是“基准最大字号”，RFS 以它为上限，在视口宽度变化时线性缩小至下限（默认约 1rem）。传错值或单位，结果会反直觉。
- 别传
font-size(16px)当基准——这会让大屏也只显示 16px，失去“越大越醒目”的设计意图 - 必须带单位：
font-size(1.25rem)合法，font-size(1.25)报错；font-size(20px)合法，font-size(20)不合法 - 它只作用于声明的
font-size属性，不影响line-height、margin、padding，这些需单独处理或依赖 rem 继承 - 组件变量（如
$table-font-size、$btn-font-size）默认没被font-size()包裹，需手动重定义再@import才能同步缩放
表格、按钮、第三方插件字体不会自动响应，得单独干预
Bootstrap 的 .table、.btn、.alert 等组件类，其字体大小由独立 Sass 变量控制（如 $table-font-size），而这些变量默认未接入 RFS 流程。即使你开启了 $enable-responsive-font-sizes，表格文字仍保持固定尺寸。
解决方式只有两种：
- Sass 项目：在
@import "bootstrap"前重定义变量，例如$table-font-size: font-size(14px);，确保它被包裹 - CDN / CSS 项目：对目标选择器手写媒体查询 +
calc()，例如.table td { font-size: calc(0.875rem + 0.2vw); } - 第三方插件（如
select2、flatpickr）完全不受影响，需用.select2-container { font-size: font-size(1rem); }（Sass）或全局html { font-size: clamp(1rem, 1.2vw + 0.8rem, 1.25rem); }（CSS）兜底
RFS 的缩放逻辑是“有边界的渐进式压缩”，不是无脑按比例缩放。很多人调了 $rfs-breakpoint: 768px 却发现小屏文字反而更小，是因为没同步调大 $rfs-minimum-font-size ——这个下限值一旦设得太低，手机上就只剩 12px，可读性崩坏。
