真正平滑的响应式文本缩放需用 clamp() 或 rfs：clamp() 要求 min/max 用 rem、preferred 用 vw，并加 @supports 降级；rfs 需在 @import 前声明变量并用 font-size() 函数包裹字号。
直接用 bootstrap 自带的 fs-* 类或 .h1～.h6 标题类，无法实现真正平滑的响应式文本缩放——它们只提供固定断点切换，不是随视口连续变化。真要动态适配，得靠 clamp() 或 rfs（仅限 sass 编译项目）。
用 clamp() 实现全浏览器可写的流体字号
这是最轻量、无需构建、兼容性可控的方案，适合 CDN 引入或不想碰 Sass 的项目。
-
clamp()语法必须是clamp(min, preferred, max)，三者单位要合理：min/max 用rem（保底线和上限），preferred 必须用vw（如4.5vw），写成20px就失去响应性 - 常见错误是小屏下文字发虚或看不清：把 min 设太小（如
0.75rem），建议不低于1rem（≈16px）；大屏上限别超2.5rem，否则在 4K 屏上撑满整行 - Safari 14.0 及更早版本不支持
clamp()，必须加@supports降级，例如：h1 { font-size: 1.875rem; }<br>@supports (font-size: clamp(1rem, 1vw, 2rem)) {<br> h1 { font-size: clamp(1.25rem, 5.2vw, 2.25rem); }<br>} - 别在
style属性里写clamp()：部分旧版 Safari 对内联解析不稳定，一律放在 CSS 文件中
用 RFS 在 Sass 项目中启用真正的响应式字号
RFS 是 Bootstrap 内置的响应式字体系统，但默认只对原生类（如 .display-4、.lead）生效，你写的自定义 class 不会自动变小。
- 必须在
@import "bootstrap"前声明变量，顺序不能错：$enable-responsive-font-sizes: true;<br>$rfs-breakpoint: 768px;<br>$rfs-minimum-font-size: 14px;<br>@import "bootstrap/scss/functions";<br>@import "bootstrap/scss/variables";<br>@import "bootstrap/scss/bootstrap";
- 开启后，所有需要响应式的字号必须用
font-size(20px)包裹（注意带单位！font-size(20)会报错），直接写font-size: 20px不触发 RFS - 默认缩放只从
1200px开始，小于该宽度就锁死在最小值——这不是 bug，是设计行为；若需从768px启动缩放，必须提前设$rfs-breakpoint - 组件内文字（如
.table、.alert）默认不走 RFS，得重定义变量：$table-font-size: font-size(16px);，再@importBootstrap
为什么 fs-sm-4 类在导航栏里没反应
fs-* 类本质是 CSS 自定义属性 + rem 计算，但 .nav-link 有硬编码的 font-size: 1rem，会直接覆盖继承值。
- 给
<a class="nav-link fs-lg-4"></a>加类无效，因为.nav-link的声明权重更高 - 想让导航文字响应，最简单的是内联写：
style="font-size: clamp(0.875rem, 4vw, 1.25rem);" - 如果要用 CSS 类管理，建议新建
.nav-link-responsive，并配合var(--nav-font-size)+ JS 或媒体查询动态赋值 -
navbar-expand-sm只控制折叠逻辑，和字体大小完全无关；折叠态下的文字至少保持1rem，否则触控困难
真正难处理的不是“怎么缩”，而是“缩到哪停”——clamp() 的 min/max 值要结合真实设备测试，RFS 的 $rfs-breakpoint 和 $rfs-minimum-font-size 必须在 @import 前声明，漏掉任意一个，整个响应逻辑就静默失效。
