Bootstrap 5 通过 clamp(1rem, 0.875rem + 0.25vw, 1.25rem) 动态调整根字体大小，在14px–20px间响应式缩放；line-height需用无单位值（如1.5）以随font-size等比缩放，不可在其中直接使用clamp()。
Bootstrap 5 的 font-size 响应式机制怎么起作用
Bootstrap 5 默认启用 rem 基础字体系统，根元素 :root 的 font-size 被设为 1rem = 16px，但关键在于它用 clamp() 函数动态调整这个基准值：默认是 clamp(1rem, 0.875rem + 0.25vw, 1.25rem)。这意味着小屏（如手机）下字号不会缩得太小，大屏（如 4K 显示器）也不会无限放大——它在 14px 到 20px 之间平滑过渡。
行高没被自动响应式处理，Bootstrap 只对 font-size 做了 clamp，line-height 仍依赖你显式设置或继承默认值（通常是 1.5）。所以“舒适比例”不能只靠框架自动给，得你干预。
怎么让 line-height 和 font-size 同步响应
直接写 line-height: clamp(1.4, 1.3 + 0.1vw, 1.6); 是无效的——CSS 不允许在 line-height 中用 clamp() 配合 vw，浏览器会忽略该声明。正确做法是绑定到 font-size 的变化上，用相对单位：
- 始终用无单位数值（如
1.5）设line-height，它会随font-size等比缩放 - 避免用
px、em或%设行高，否则会破坏比例一致性 - 若需微调，可在不同断点重置
line-height：@include media-breakpoint-up(md) { font-size: clamp(1rem, 0.9rem + 0.15vw, 1.125rem); line-height: 1.55; } @include media-breakpoint-up(lg) { line-height: 1.6; }
自定义文本类时容易忽略的三个坑
很多人复制 .fs-1～.fs-6 的写法，但没注意它们只是静态字号，不带响应式。想真正适配，得自己封装：
-
.fs-responsive这类类名必须配合font-size: clamp(...)，不能只套用 Bootstrap 内置类 - 如果同时用了
text-wrap或text-truncate，要检查max-width是否限制了换行空间，导致行高视觉失衡 - 第三方字体（如 Inter、SF Pro）的
line-height推荐值和系统字体不同，比如 Inter 建议正文用1.5，标题用1.2；硬套 Bootstrap 默认的1.5可能显得松散
移动端小字号下阅读吃力？优先调 min-font-size 而非改 clamp 下限
用户反馈“iPhone 上字太小”，不是因为 clamp 错了，而是 iOS Safari 对 vw 的解析受视口缩放影响，实际最小值可能低于预期。更稳的做法：
- 把
clamp(1rem, ...)改成clamp(1.0625rem, ...)（即17px），绕过系统最小字号限制 - 禁用用户缩放（
user-scalable=no）会破坏可访问性，不推荐 - 测试时务必开启 Safari 的「显示兼容性警告」，某些
clamp组合在旧版 iOS 会被降级为固定值
复杂点在于：舒适不是单一参数决定的，是 font-size、line-height、letter-spacing、容器宽度和字体度量共同作用的结果。哪怕 clamp 写对了，如果段落宽度超过 80ch，再好的字号也难读。
