bootstrap 5.3+ 的流体字号依赖 fs-* 类与 clamp() 实现，需满足版本≥5.3、根字号未被篡改、浏览器支持 clamp() 且类名按断点从小到大书写，缺一不可。
Bootstrap 5 的文字自适应大小，本质是靠 fs-* 类 + clamp() 实现的流体字号，不是媒体查询堆砌，也不是 JS 控制。但它对版本、根字号、浏览器支持都有硬性要求，用错一个就“看起来没反应”。
fs-* 类必须搭配 Bootstrap 5.3+ 才真正生效
很多人写了 fs-lg-5 却没变化，第一反应是 class 写错了——其实更可能是版本太低。Bootstrap 官方在 5.3 版本才正式将响应式字号（带断点前缀的 fs-sm-*、fs-md-* 等）纳入默认构建。5.2 及更早版本只提供基础 fs-1 到 fs-6，不识别任何带断点前缀的变体。
验证方式很简单：console.log(bootstrap.version) 或检查你引入的 CSS 文件 URL 是否含 5.3 或更高字样。CDN 地址应类似：https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css。若用 npm 安装，运行 npm list bootstrap 确认版本。
- 5.2.x 及以下：写
fs-md-4会被浏览器完全忽略（无对应 CSS 规则） - 5.3+：每个
fs-*类背后都是font-size: clamp(...)，且断点类会生成对应媒体查询包裹的覆盖规则 - 自己从源码编译？需确认
_variables.scss中启用了$enable-responsive-font-sizes: true
根字号（:root font-size）被改，clamp 就全乱套
clamp(1.25rem, 4vw, 1.5rem) 这个公式里，1rem 默认等于 16px。一旦你在 CSS 里写了 html { font-size: 18px; } 或 :root { font-size: 14px; }，所有 rem 值都会按比例缩放——但 vw 部分不会变。结果就是最小值和最大值偏移，中间的“理想字号”段落被压缩或拉伸，视觉上字体该大不大、该小不小。
典型现象：平板横屏时文字突然变小，或桌面端字号卡在最小值不动。这不是 bug，是计算基准崩了。
- 修复方法：要么统一用
rem调整根字号（推荐），让所有基于 rem 的排版属性（margin、padding、line-height）同步缩放 - 要么重写
fs-*类的clamp()表达式，把rem换成具体像素值（不推荐，失去可维护性） - 检查是否第三方 UI 库或重置 CSS（如 normalize.css）偷偷改了
html字号
老浏览器 fallback 机制容易被忽略
clamp() 在 IE 全系、Safari ≤13.1、旧版 Firefox 中不被识别，整条 font-size 声明会被跳过，降级为浏览器默认的 16px。这意味着你的 fs-4 在 Safari 13 上可能显示得比 fs-2 还小——因为后者有基础声明兜底，而前者整个规则失效。
Bootstrap 5.3 的 CSS 源码里其实已内置 @supports (font-size: clamp(1rem, 1vw, 1rem)) 包裹逻辑，但如果你用的是精简版 CSS、自定义构建、或 CDN 上的 minified 文件，这个包裹可能被移除或压缩丢失。
- 手动加固：给关键文字加一层降级，比如
<p class="fs-4">...</p>同时在 CSS 中补一句.fs-4 { font-size: 1.5rem; }（放在@supports外面） - 别依赖
fs-*做语义化标题：<h2 class="fs-1"></h2>在老浏览器里既不是语义h2大小，也没有fs-1效果，双重失效 - 真要兼容 Safari 13？只能放弃
clamp，退回传统媒体查询方案，或用 JS 检测后动态插入类
断点叠加顺序和类名组合有隐性层叠陷阱
写 class="fs-3 fs-md-2 fs-lg-1" 看似合理，但实际渲染取决于 CSS 层叠顺序和断点媒体查询的包裹逻辑。Bootstrap 的实现是：每个带断点的类都用对应媒体查询包裹，例如 fs-md-2 编译后类似：
@media (min-width: 768px) {
.fs-md-2 {
font-size: clamp(1.125rem, 3.2vw, 1.25rem);
}
}
问题在于：如果多个断点类同时存在，且它们的媒体查询范围重叠（比如 sm 和 md 在 768px 处交界），浏览器会按 CSS 文件中规则出现的先后顺序应用——而不是按“断点越大优先级越高”。所以 fs-sm-4 fs-md-3 是安全的，但 fs-md-3 fs-sm-4 可能导致小屏下 fs-sm-4 被后面加载的 fs-md-3 规则意外覆盖（因媒体查询未生效，纯类名冲突）。
- 始终按断点从小到大顺序写类名：
fs-2 fs-sm-3 fs-md-4 fs-lg-3 - 避免混用无前缀类和带前缀类做精细控制，比如
fs-4 fs-lg-5—— 无前缀类在所有屏幕生效，fs-lg-5只在 lg+ 生效，但两者没有明确的“覆盖关系”，易产生预期外的过渡带 - 想精细控制某一段视口？直接写自定义
clamp()并配@supports，别强行塞进fs-*体系
真正难的不是写对 class，而是理解 clamp() 是一个连续函数，不是离散开关；它和根字号、浏览器支持、CSS 层叠三者咬合极紧。漏掉其中一环，自适应就变成“有时灵、有时不灵”的玄学问题。
