bootstrap 5.3+ 才真正支持 fs-{breakpoint}-{size} 响应式字号类；低于该版本（如5.2或4.x）会直接忽略，需确认版本≥5.3、根字号未篡改、浏览器支持 clamp()，且类名必须按断点从小到大书写（如 fs-3 fs-md-4 fs-lg-2）。
Bootstrap 5.3+ 才真正支持 fs-{breakpoint}-{size} 这类响应式字号类；低于该版本（如 5.2 或 4.x）写 fs-md-4 会被浏览器直接忽略，毫无效果。
确认你用的是 Bootstrap 5.3 或更高版本
这是硬性前提。运行以下代码检查实际加载的版本：
console.log(bootstrap?.version || '未检测到 bootstrap 对象');
如果输出是 "5.2.3" 或更早，fs-md-4 类名根本不会被解析——CSS 文件里压根没定义它，浏览器连尝试应用都不会。
- CDN 引入的
bootstrap.min.css默认不启用流体字体（RFS），fs-md-*类只在 5.3+ 中通过clamp()实现，且依赖原生 CSS 支持 - 若用 Sass 构建，需确保
$enable-responsive-font-sizes: true已在@import "bootstrap/scss/bootstrap"前声明 - IE 和 Safari ≤13.1 不支持
clamp()，会 fallback 到最小值（看起来像“没变”），这不是 bug，是降级行为
正确书写顺序：从小断点到大断点叠加
fs-3 fs-md-4 fs-lg-2 是有效写法；fs-lg-2 fs-md-4 则大概率失效——因为 CSS 层叠规则会让后写的类覆盖前写的，而 fs-lg-2 的媒体查询范围包含 md，导致 md 断点也用了 lg 的规则。
-
fs-*（无前缀）等价于fs-xs-*，作用于所有视口 - 断点必须严格按 Bootstrap 内置顺序：xs → sm → md → lg → xl → xxl
- 跳过中间断点可以，但不能倒序；例如
fs-4 fs-lg-5合法，fs-lg-5 fs-md-4不合法 - 自定义根字号（如
:root { font-size: 18px; }）会破坏clamp()区间平衡：rem 部分放大，vw 部分不变，小屏字反而可能变大
为什么加了 fs-lg-4 却没变化？优先排查这三处
不是代码写错，而是环境或样式冲突掩盖了效果。
- 控制台检查元素计算后的
font-size，看是否被更高优先级样式覆盖（比如.nav-link { font-size: 1rem !important; }） - 检查是否在自定义 CSS 中写了类似
h1 { font-size: 2.5rem; }—— 这会直接干掉.h1或fs-*的clamp()规则 - 第三方组件（如
select2、flatpickr）内部文字不受任何fs-*类影响，必须单独加font-size: clamp(...)
纯 CSS 项目或旧版本 Bootstrap 怎么办
别折腾类名，直接手写 clamp() 最可控。注意单位和降级：
h2 {
font-size: 1.5rem;
}
@supports (font-size: clamp(1rem, 1vw, 2rem)) {
h2 {
font-size: clamp(1.25rem, 4.2vw, 1.75rem);
}
}
-
min和max必须用rem（保底线与上限），preferred必须用vw（如4.2vw），写成px就失去响应性 - 别套在正文段落上——
line-height、letter-spacing没同步变化时，可读性会下降 - Safari 14.0 及更早不支持
clamp()，必须用@supports包裹，否则旧版 Safari 会丢弃整条规则
真正麻烦的不是怎么写，而是判断哪些地方该用 fs-*、哪些必须手写 clamp()——前者适合标题类离散切换，后者才适合需要平滑缩放的场景；混用或强行扩展断点类，反而让维护成本翻倍。
