bootstrap 5.3+ 的 fs-* 类未生效最常见的原因是版本低于5.3（如5.2.3），该类仅在5.3+中定义；其次为自定义 :root 字号破坏 clamp() 响应逻辑、浏览器不支持 clamp()、第三方组件样式隔离、css 层叠顺序错误（须按 xs→sm→md→lg→xl→xxl 从小到大书写）及全局 !important 覆盖。
Bootstrap 5.3+ 的 fs-* 类为什么没生效
最常见原因是版本不够——fs-sm-4 这类带断点前缀的类只在 Bootstrap 5.3 及以上才被定义。用 console.log(bootstrap.version) 检查，如果是 "5.2.3" 或更低，写了也白写，浏览器直接忽略整个类名。
另一个高频干扰是自定义根字号：:root { font-size: 18px; } 会让 clamp() 中的 rem 部分同比放大，但 vw 部分不变，结果小屏字反而比预期更大，看起来像“没响应”。别改 :root 字号，除非你同步重调 RFS 参数。
- 确认 CDN 引入的是
bootstrap@5.3+，不是bootstrap@5.2或更老的 minified CSS - 检查控制台是否报
Unknown property 'font-size'——那说明浏览器不支持clamp()（如 Safari ≤13.1），会 fallback 到最小值，不是 bug 是降级 - 第三方组件（如
select2、flatpickr）内部文字不受fs-*影响，得单独加font-size: clamp(...)
怎么正确叠加 fs-* 类实现断点切换
fs-3 fs-md-4 fs-lg-2 是合法写法；fs-lg-2 fs-md-4 几乎一定失效。原因不是语法错，而是 CSS 层叠规则：后写的类里媒体查询范围（@media (min-width: 992px)）覆盖了更小断点，导致 md 断点也套用了 lg 的规则。
fs-* 类的断点前缀不是“仅在该断点生效”，而是“从该断点起（含）开始应用”。所以 fs-md-4 实际作用范围是 ≥768px，fs-3（等价于 fs-xs-3）兜底 ≤576px。
- 必须按断点从小到大书写：
xs → sm → md → lg → xl → xxl，跳过中间断点可以，倒序不行 -
fs-5等价于fs-xs-5，作用于所有视口，是默认 fallback - 断点名只能是 Bootstrap 内置的：
sm、md、lg、xl、xxl；xs不加前缀
Bootstrap 5.2 或更早版本怎么办
这些版本压根没有 fs-sm-* 类，Sass 编译时就不存在，CSS 文件里搜不到对应规则。你不能靠引入新版 CSS 补丁解决——RFS 是 Sass 编译期能力，不是运行时 JS 插件。
可行方案只有两个：一是手动写媒体查询 + clamp()，二是走 Sass 流程启用 RFS。后者要求你有构建环境，并且提前在 _custom.scss 里声明：$enable-responsive-font-sizes: true;，位置必须在 @import "bootstrap/scss/variables" 之后、@import "bootstrap/scss/bootstrap" 之前。
- 纯 CSS 项目推荐抄官方断点值写媒体查询：
@media (min-width: 768px) { .my-title { font-size: clamp(1.25rem, 4vw, 1.5rem); } } - 别用
calc()替代clamp()——它无法设上下限，小屏可能缩到看不见 - CDN 引入的
bootstrap.min.css无法启用 RFS，无论你怎么改配置都没用
为什么加了 fs-lg-4 却没缩放效果
不是代码写错，大概率是样式被覆盖。比如你在全局写了 h1 { font-size: 2.5rem !important; }，这条规则会直接干掉 .h1 或 fs-lg-4 的 clamp() 声明。
另外，RFS 默认缩放区间下限约 1rem（≈16px），如果你设计稿基准就是 16px，那无论怎么拉宽屏幕，字都不会变大——因为已达上限。真正起效需要基准值明显大于小屏最小值，比如 fs-6（默认最大约 2.5rem）。
- 用浏览器开发者工具检查元素 computed 样式，看
font-size是否被划掉，被谁覆盖 - 确认没在其他地方用
!important锁死font-size - RFS 的缩放逻辑依赖视口宽度线性插值，不是阶梯式切换，别期待“一到 lg 就突然变大”
!important 规则、以及第三方组件内部样式的三方冲突。它不像 text-center 那样即插即用，而是一套需要整体对齐的响应式契约。
