Bootstrap如何设置不同屏幕断点下的文本字体大小（Responsive Font）

<p>Bootstrap 5.3+ 的 fs-* 类未生效最常见的原因是版本低于5.3（如5.2.3），该类仅在5.3+中定义；其次为自定义 :root 字号破坏 clamp() 响应逻辑、浏览器不支持 clamp()、第三方组件样式隔离、CSS 层叠顺序错误（须按 xs→sm→md→lg→xl→xxl 从小到大书写）及全局 !important 覆盖。</p>

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 参数。

1. 确认 CDN 引入的是 [email protected]+，不是 [email protected] 或更老的 minified CSS
2. 检查控制台是否报 Unknown property 'font-size'——那说明浏览器不支持 clamp()（如 Safari ≤13.1），会 fallback 到最小值，不是 bug 是降级
3. 第三方组件（如 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。

1. 必须按断点从小到大书写：xs → sm → md → lg → xl → xxl，跳过中间断点可以，倒序不行
2. fs-5 等价于 fs-xs-5，作用于所有视口，是默认 fallback
3. 断点名只能是 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" 之前。

1. 纯 CSS 项目推荐抄最新断点值写媒体查询：@media (min-width: 768px) { .my-title { font-size: clamp(1.25rem, 4vw, 1.5rem); } }
2. 别用 calc() 替代 clamp()——它无法设上下限，小屏可能缩到看不见
3. 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）。

1. 用浏览器开发者工具检查元素 computed 样式，看 font-size 是否被划掉，被谁覆盖
2. 确认没在其他地方用 !important 锁死 font-size
3. RFS 的缩放逻辑依赖视口宽度线性插值，不是阶梯式切换，别期待“一到 lg 就突然变大”

实际项目里最容易被忽略的，是 RFS 和自定义根字号、全局 !important 规则、以及第三方组件内部样式的三方冲突。它不像 text-center 那样即插即用，而是一套需要整体对齐的响应式契约。