<p>Bootstrap 5.3+ 使用 fs-* 响应式字号类（如 fs-2、fs-md-4），基于 clamp(min, preferred, max) 实现自动缩放，需确保版本支持、根字号未被修改且浏览器兼容。</p>
Bootstrap 5 的 font-size 响应式类怎么用
Bootstrap 5 内置的响应式字号（Responsive Font Sizes）不是靠媒体查询手动写，而是通过 font-size 工具类组合视口断点自动缩放。它本质是 CSS clamp() 函数 + 自定义属性，不是 JS 控制，也不依赖 viewport 缩放。
实际用法就是给元素加类似 fs-1、fs-sm-2、fs-lg-4 这样的类——注意中间是 -sm-、-md- 这种断点前缀，不是 sm:fs-2 这种 Tailwind 风格。
-
fs-1到fs-6是基础字号，对应font-size: clamp(...)，默认在所有断点生效 - 加断点前缀如
fs-md-3表示「从md断点起才启用fs-3的字号规则」，更小屏幕会回退到未加前缀的类或浏览器默认值 - 如果同时写了
fs-2 fs-md-4，那么小屏用fs-2，中屏及以上用fs-4，且各自都带 clamp() 响应逻辑
为什么加了 fs-lg-5 字体没变大
常见现象：写了 fs-lg-5，但实际渲染和 fs-4 没区别，甚至比预期还小。根本原因有两个：
- 你没引入 Bootstrap 5.3+ 版本——
fs-*-*响应式字号类是 5.3 才正式加入的，5.2 及之前只有基础fs-1~fs-6 - 你用了自定义字体或重写了
html或body的font-size，而 Bootstrap 的clamp()计算基于根字号（1rem = 16px），一旦根字号被改，整个比例就偏了 - 浏览器不支持
clamp()（IE 全系、旧版 Safari ≤13.1）会直接 fallback 到最小值，看起来像“没生效”
clamp(1.25rem, 4vw, 1.5rem) 这个公式怎么理解
Bootstrap 每个 fs-* 类背后都是一个 clamp(min, preferred, max) 表达式，比如 fs-4 默认是 clamp(1.25rem, 4vw, 1.5rem)。这不是魔法，是明确的三段控制：
立即学习“前端免费学习笔记（深入）”；
-
1.25rem：最小字号，屏幕极窄时（比如手机竖屏）强制不低于这个值，防文字过小 -
4vw：理想字号，随视口宽度线性变化（100vw 宽时是 4rem，375vw 宽时是 1.5rem），这是真正“自适应”的部分 -
1.5rem：最大字号，屏幕很宽时（比如桌面大屏）不再继续放大，防文字过大破坏布局
如果你发现字号在平板上突然跳变，大概率是 preferred 和 max 值设得太接近，或者断点切换时两个 clamp() 的区间有重叠/断裂。
自己写响应式字号时容易漏掉的兼容细节
直接抄 Bootstrap 的 clamp() 看似简单，但实际项目里常踩三个坑：
- 没配
@supports (clamp: 1rem)回退方案：老浏览器会忽略整条font-size声明，文字变成浏览器默认大小（通常是 16px），布局可能错乱 - 把
vw当成万能解：横屏手机（比如 iPhone 横置）vw突然变大，但用户并不需要更大字号，反而该限制横向最大值，这时得结合max-width媒体查询单独处理 - 混用
rem和em：父元素font-size改变时，em会层层继承缩放，而clamp()里的rem始终锚定根字号，两者混用会导致计算失准
真要精细控制，别只依赖一套 clamp()；小屏保可读、中屏做平衡、大屏控上限，这三段逻辑最好分开写，而不是硬塞进一个函数里。
