Bootstrap响应式字体类在移动端失效，主因是组件硬编码font-size覆盖自定义属性、继承链断裂及rem依赖固定根字号；有效解法为clamp()、调整:root字号或强覆盖特定组件。
手机端文字太小，不是加个 fs-5 就能解决的——Bootstrap 的响应式字体类在移动端常被组件自身硬编码的 font-size: 1rem 覆盖，尤其在 .nav-link、.tooltip-inner、.modal-body p 这些地方，直接加类基本无效。
为什么 fs-* 在手机上没反应
根本原因不是类没加载，而是优先级和继承链断裂：
-
fs-*类设置的是font-sizeCSS 自定义属性（如--bs-font-size），但很多 Bootstrap 组件（如.nav-link、.btn、.tooltip-inner）有显式声明font-size: 1rem !important或带单位的固定值，直接覆盖了继承来的变量 -
fs-*只作用于直系子元素，而像导航栏里文字套在.nav-item > .nav-link两层结构中，fs-*加在.navbar上根本传不到.nav-link - 手机 Safari 和部分安卓浏览器对
rem的计算依赖:root字号，但如果你没改过:root { font-size: 16px }，那所有1rem就死卡在 16px，缩放无从谈起
真正起效的三类写法（按实操优先级）
绕过默认锁定，不改源码、不靠 JS，纯 CSS 解决：
- 用
clamp()写内联或自定义类：font-size: clamp(0.875rem, 4vw, 1.25rem)—— 小屏保底 14px，大屏不撑爆，vw基于视口宽，比rem更稳；注意 Modal 内建议用vmin（如3.2vmin），避免窄高屏下文字过大 - 改
:root根字号：:root { font-size: 18px }，必须放在bootstrap.min.css之后引入，否则被覆盖；改完后所有1rem→ 18px，h1、.lead、.btn内边距等全联动变大 - 针对特定组件强覆盖：比如
.nav-link { font-size: 1.1rem !important; }或body .tooltip .tooltip-inner { font-size: 16px !important; }；注意要加body前缀，因为 Tooltip 是动态插入底部的，普通.tooltip-inner选不到
容易被忽略的致命细节
这些点不处理，放大后反而更糟：
-
<meta name="viewport" content="width=device-width, initial-scale=1">必须存在且不能含user-scalable=no，否则 iOS Safari 会禁用clamp()和缩放逻辑 -
.modal-content默认设了font-size: 1rem，会截断父级传下来的相对单位，所以别只给.modal-body设clamp()，得写.modal .modal-body p { font-size: clamp(...) }提高权重 - 用了
text-wrap却没配white-space: normal，文字在窄屏下仍不换行，看起来像“消失”了 - 第三方插件（如
select2、daterangepicker）完全不走 Bootstrap 字体体系，得单独加font-size规则，且要模拟其真实 DOM 插入位置写选择器
最麻烦的从来不是“怎么放大”，而是“放大后是否还对齐、可点、不溢出”——字体大小一动，line-height、padding、z-index、甚至 .tooltip-arrow 的偏移都会连锁失准。真机测试前，先关掉 Chrome 的“模拟移动设备”，用 Safari 开发者工具连真机看 computed styles。
