必须手动在自定义CSS中写clamp()才能实现流畅缩放，Bootstrap 5.3+的fs-*类仅提供静态值或calc()线性计算，不生成clamp()；需用具体选择器声明font-size: clamp(min, preferred, max)，单位统一（min/max用rem，preferred用vw），并配@supports降级。
clamp() 必须手动写进 CSS，fs-* 类不触发流体缩放
Bootstrap 5.3+ 的 fs-* 类（如 fs-4、fs-lg-5）本质是静态值或带固定断点的 calc() 表达式，不是真正的连续缩放。它们不会自动生成 clamp()，哪怕你用了 fs-md-4，浏览器看到的仍是类似 font-size: calc(1.275rem + .3vw) 这种线性计算，而非三段式动态区间。
要获得平滑响应效果，必须绕过工具类，直接在自定义 CSS 中声明：
- 用具体选择器（如
.h1、.nav-link、.lead）覆盖默认字号 -
font-size值必须显式写成clamp(min, preferred, max) - 不要依赖
style属性——旧版 Safari 对内联clamp()解析不稳定 - 示例：
.h1 { font-size: clamp(1.5rem, 5.2vw, 3rem); }
单位混用是 clamp() 失效最常见原因
clamp() 三个参数单位不统一，会导致部分浏览器直接丢弃整条声明，回退到未设置状态（常表现为默认 16px）。尤其注意：不能把 px 和 rem 混在同一个 clamp() 里。
-
min和max必须用rem（如1.125rem），确保小屏可读、大屏不爆炸 -
preferred必须用vw（如4.5vw），这是实现“随视口连续变化”的唯一可靠方式 - 错误写法：
clamp(18px, 4.5vw, 1.5rem)→ Safari 可能忽略整条规则 - 正确换算：1.125rem = 18px（基于默认
:root { font-size: 16px; }）
@supports 降级不是可选项，而是必做项
iOS Safari 14.0、Android WebView（尤其旧版）、部分 Chromium 87-87.0.4280 内核不支持 clamp()。如果没加 @supports，这些设备会直接跳过你的流体字号，显示为未定义状态。
立即学习“前端免费学习笔记（深入）”；
- 必须写成两层结构：先设降级值，再用
@supports包裹clamp() - 示例：
p.lead { font-size: 1.25rem; } @supports (font-size: clamp(1rem, 1vw, 2rem)) { p.lead { font-size: clamp(1.125rem, 3.8vw, 1.5rem); } } - 别指望 PostCSS 插件自动 polyfill ——
clamp()无法被 JS 安全模拟，强行补全反而拖慢首屏 - 检查是否误写了
@supports (font-size: clamp())：括号内必须有合法值，否则语法错误
根字号（:root font-size）被改过，clamp() 就会偏航
所有 rem 都依赖 :root 的基准值。如果你或第三方脚本动过 html { font-size: 18px; } 或用 JS 动态重设过它，clamp(1.25rem, 4vw, 1.5rem) 实际就变成 clamp(22.5px, 4vw, 27px)，缩放区间被压缩，小屏下极易卡死在最小值，文字发虚看不清。
- 调试时先在开发者工具中查
:root的font-size计算值是否为 16px - 避免全局修改
:root font-size，除非你同步重写全部 Bootstrap 间距、圆角、行高等 rem 相关属性 - 导航栏等关键区域若需缩放，优先用
clamp()直接作用于.nav-link，不依赖根字号传导 - 图标字体（如 Bootstrap Icons）对根字号更敏感：改了
:root后，图标可能变粗、糊边、比例失真
