bootstrap 5 通过 fs-* 类加断点后缀（如 fs-md-3）实现响应式字体，仅控制 font-size；需按断点从小到大叠加类，自定义需修改 sass 变量 $grid-breakpoints 和 $font-sizes。
Bootstrap 5 中如何用响应式字体类控制不同断点下的字号
Bootstrap 5 原生支持响应式字体大小，但不是靠媒体查询手动写 CSS，而是通过预设的 fs-*（字体尺寸）和 fw-*（字重）类 + 断点后缀实现。关键点：它只对 font-size 生效，不改变 line-height 或其他排版属性，且默认不启用流体字体（fluid typography）。
-
fs-1到fs-6是基础字号类，对应font-size: 2.5rem~0.75rem - 加断点前缀可做响应式覆盖，例如
fs-sm-3表示在sm及以上断点使用fs-3的字号，fs-md-2表示从md开始切换为fs-2的大小 - 断点顺序必须从小到大叠加，比如
fs-4 fs-md-3 fs-lg-2—— 否则小断点的类会被后续类覆盖（CSS 层叠规则） - 注意：Bootstrap 5 默认断点是
xs（无前缀）、sm、md、lg、xl、xxl；xs不带前缀，所以fs-5实际等价于fs-xs-5
为什么直接写 font-size 媒体查询有时比用 Bootstrap 类更灵活
因为 Bootstrap 的响应式字体类只提供离散值（如 fs-3 固定为 1.75rem），无法实现「随视口平滑缩放」的流体效果。如果你需要类似 clamp(1rem, 2.5vw, 1.5rem) 这种动态计算，就必须绕过类系统，自己写 CSS：
.fluid-title {
font-size: clamp(1rem, 4vw, 2.5rem);
}
@media (min-width: 576px) {
.fluid-title {
font-size: clamp(1.125rem, 3.5vw, 2.25rem);
}
}
- Bootstrap 5.3+ 虽然引入了
font-fluid实验性类，但它依赖 Sass 变量和编译时生成，并非开箱即用 - 自定义
clamp()更可控，尤其适合标题类元素；但要注意 Safari 旧版本对clamp()支持不稳定（iOS 13.4+ 才完善） - 别把
clamp()套在正文段落上——行高、字间距、段间距没同步变化时，可读性反而下降
自定义断点字体时，Sass 变量怎么改才不破坏原有体系
如果你项目里要新增一个 2xl 断点下的字体类（比如 fs-2xl-1），不能只加 CSS，得从 Sass 层补全逻辑。核心变量是 $font-sizes 和 $grid-breakpoints：
// _custom.scss $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1400px // 新增断点 ); // 确保 $font-sizes 已定义（默认已有），再生成响应式类 @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities/text";
- 必须在导入
text工具类之前重定义$grid-breakpoints，否则新断点不会被fs-*-*类识别 - 不要覆盖
$font-sizes全量值，只需追加，例如：$font-sizes: map-merge($font-sizes, (2xl-1: 3.5rem)); - 编译后才会生成
fs-2xl-1对应的 CSS 规则；纯 CSS 引入 bootstrap.min.css 的项目无法动态添加这类类名
移动端字体突然变小？检查 viewport meta 和根元素 font-size
即使用了 fs-6 fs-md-4，iOS Safari 仍可能让文字显示异常小——大概率是 <meta name="viewport"> 缺失或 html 根字体被重置。
- 确保页面有标准 viewport 声明：
<meta name="viewport" content="width=device-width, initial-scale=1"> - Bootstrap 5 默认基于
16px根字号（html { font-size: 1rem; }），如果项目全局设了html { font-size: 62.5%; }（为 rem 计算方便），那所有rem单位字体都会缩小 40% - 调试技巧：在浏览器开发者工具中选中元素，看「Computed」面板里的
font-size最终值，再往上追溯是哪个规则覆盖了fs-*类 - Android WebView 和部分国内双核浏览器对
rem解析有偏差，必要时可用px替代，但会失去缩放适配能力
响应式字体不是简单堆砌类名，真正难的是字号阶梯是否匹配内容层级、断点切换是否符合用户实际阅读场景、以及和 line-height / letter-spacing 的协同。这些细节没法靠一个 class 解决，得结合设计系统一起推演。
