bootstrap 5.3+ 支持流体排版，fs-*类需加断点后缀（如fs-lg-4）才启用clamp()响应缩放；rfs默认仅作用于h1–h6等内置类，不覆盖自定义元素；clamp()在ie和旧safari中降级为min值，需@supports检测及fallback。
Bootstrap 5 默认就支持响应式字体大小，无需额外配置；但“流体排版”（fluid typography）是否生效，取决于你用的是哪套机制、哪个版本、以及有没有踩中几个关键兼容性坑。
Bootstrap 5 的 fs-* 类是否真能响应式缩放？
能，但只在 Bootstrap 5.3+ 版本中有效。fs-1 到 fs-6 是静态字号类，不带断点前缀时不会随视口变化；只有加了断点后缀（如 fs-md-4、fs-lg-3）才触发响应逻辑——而且它背后是 clamp()，不是媒体查询。
-
fs-4在 5.3+ 中实际编译为font-size: clamp(1.25rem, 4vw, 1.5rem)，小屏取 1.25rem，大屏锁死在 1.5rem，中间线性过渡 - 写了
fs-3 fs-lg-4，表示：lg 及以上用clamp(1.375rem, 4.5vw, 1.625rem)，lg 以下回退到fs-3的静态值（1.375rem），不是“叠加”，而是 CSS 层叠覆盖 - 如果用了自定义根字号（比如
:root { font-size: 18px; }），所有rem基准都会变，但vw部分不变，可能导致小屏下clamp()的 min 值实际偏大、缩放区间被压缩 - IE 全系、Safari ≤13.1 不支持
clamp()，会直接 fallback 到 min 值（如1.25rem），看起来像“没响应”，不是 bug 是降级
为什么开了 RFS 还没效果？
RFS（Responsive Font Sizes）在 Bootstrap 5 中默认启用，但它只作用于内置标题类（h1–h6、.display-*、.lead），不自动扩散到你写的 p、span 或自定义 class。
-
.h1类默认已含font-size: clamp(2.5rem, 5.2vw, 3.5rem)，但如果你手动写了h1 { font-size: 2.5rem; }，就会覆盖掉 RFS 的声明 - 第三方组件（如
select2、flatpickr）的字体不受 RFS 影响，得单独加font-size: clamp(...)或靠全局根字号缩放 - 旧安卓 WebView（Android 4.4–6.0）对
calc()支持不稳定，而部分 RFS 实现仍依赖calc()回退路径，建议补一层降级：font-size: 1.5rem; font-size: clamp(1.25rem, 4vw, 1.5rem); - 如果你重写了
$font-size-base变量（比如设成18px），RFS 的计算基准会变，但缩放系数不变，可能让小屏下文字比预期更“胖”
自己写 clamp() 容易漏掉的三件事
抄 Bootstrap 的 clamp(1.25rem, 4vw, 1.5rem) 很容易，但上线后出问题往往卡在这三个细节上：
- 没加
@supports (font-size: clamp(1rem, 1rem, 1rem))降级块：老浏览器直接跳过整条font-size声明，文字退回浏览器默认 16px，布局错位 -
preferred值用了px或rem（如clamp(1rem, 20px, 2rem)），失去响应性——必须用vw或vmin才能随视口变化 - min 和 max 设得太接近（如
clamp(1.25rem, 4vw, 1.3rem)），导致在常见宽度区间内始终取 min 或 max，看起来像“没动”
流体排版到底值不值得上？
它不是银弹。优势很明确：单行声明、平滑过渡、免维护断点；但代价也很实在：兼容性收口要多做一层，设计稿换算成本略高，且对阅读节奏敏感的长文本（比如正文段落）未必比固定字号+合理行高更舒服。
真正该用流体的地方是标题、卡片主文案、Banner 主标语这类强调视觉层级、宽度跨度大的元素；而正文字号建议保持固定（或仅做断点切换），把精力放在 line-height、letter-spacing 和容器宽度控制上——毕竟人眼适应的是比例关系，不是绝对像素。
