Bootstrap 5.3+ 的 fs-* 类通过 clamp() 实现流体字号,需版本≥5.3、根字号未篡改、浏览器支持 clamp(),且类名须按断点从小到大书写(如 fs-3 fs-md-4 fs-lg-2),否则层叠失效。
直接用 fs-{breakpoint}-{size} 类就行,但得确认你用的是 bootstrap 5.3+,否则类名会被浏览器忽略。
Bootstrap 5.3+ 的 fs-sm-4 类怎么用
它不是“在 sm 断点时生效”,而是“从 sm 断点起(含)开始应用该字号”,更小断点会回退到没前缀的类或默认值。
- 写法必须是
fs-3 fs-md-4 fs-lg-2这种从小到大叠加,CSS 层叠才按预期生效;反过来写fs-lg-2 fs-md-4,md 断点也会用 lg 的规则 -
fs-1到fs-6是基础尺寸,对应font-size: clamp(...),加断点前缀后生成带媒体查询的覆盖规则 - 断点名必须是 Bootstrap 内置的:
sm、md、lg、xl、xxl;xs不加前缀,fs-5等价于fs-xs-5 - 如果用了自定义根字号(比如
:root { font-size: 18px; }),所有rem基准都会放大,但vw部分不变,clamp 区间会失衡——小屏字反而变大
Bootstrap 4 或 5.2 及以下版本怎么办
这些版本压根不识别 fs-md-4 这种写法,类名不存在,浏览器直接丢弃。
- 只能手动写媒体查询 +
calc()或clamp(),例如:@media (min-width: 768px) { .my-title { font-size: clamp(1.25rem, 4vw, 1.5rem); } } - CDN 引入的
bootstrap.min.css无法启用 RFS,因为 RFS 是 Sass 编译期能力,不是运行时补丁 - 想用 RFS 必须走 Sass 流程:在
_custom.scss里提前设$enable-responsive-font-sizes: true;,且位置要在@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/bootstrap"之前
为什么写了 fs-lg-4 却没缩放效果
常见原因不是代码写错,而是环境或继承冲突。
- 检查控制台输出
bootstrap.version,确保 ≥ 5.3;5.2.x 写了也白写 - 自定义样式里写了
h1 { font-size: 2.5rem; },会直接覆盖掉.h1的clamp()规则 - 第三方组件(如
select2、flatpickr)内部文字不受任何fs-*类影响,得单独加font-size: clamp(...) - IE 或 Safari ≤13.1 不支持
clamp(),会 fallback 到最小值,看起来像“没响应”——这是降级,不是 bug
RFS 和 fs-* 类本质不同:前者只作用于框架内置标题类,后者才是你可控的响应式工具;但两者都依赖 Sass 编译或特定版本,纯 CSS 项目只能手写 clamp() 或 calc() 降级方案。


















