Bootstrap 响应式字体大小工具类 RFS功能详解-Bootstrap教程-PHP中文网

bootstrap 5.3+默认启用rfs，仅原生类（如.h1、.lead）自动响应式缩放；自定义类需手动用font-size()函数或calc()实现，组件及第三方插件字体须单独干预。

bootstrap 响应式字体大小工具类 rfs功能详解

Bootstrap 5 默认启用 RFS，但你写的 class 不会自动响应

Bootstrap 5.3（含）起，$enable-responsive-font-sizes 默认为 true，所有内置标题类（如 .h1、.display-4）和排版类（.lead、.small）已用 font-size() 包裹，生成带 calc() 的响应式规则。但这是“仅限框架自带类”——你自定义的 div.title、p.intro 或第三方组件内文字，不会因此变小。

常见错误现象：.h1 在小屏缩到了 1.2rem，但你自己写的 <h1 class="my-header"></h1> 还是固定 2.5rem，视觉割裂。

别指望加个 class="h1" 就能继承响应逻辑——它只对 Bootstrap 原生类生效
想让自定义元素响应，必须手动用 font-size: font-size(2rem);（仅 Sass 编译项目）或手写 calc()（CDN 项目）
Bootstrap 5 的 RFS 默认缩放区间是 1200px → ∞，小于 1200px 就锁死在最小值（约 1rem），不是全范围平滑缩放

Bootstrap 4 必须手动开启 RFS，且 CDN 版本完全无效

Bootstrap 4.3+ 虽然内置 RFS，但默认 $enable-responsive-font-sizes: false。你在 HTML 里 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">，哪怕升级到 4.6.2，.h1 仍是固定字号——RFS 是 Sass 编译期能力，不是运行时 JS 补丁。

要真正启用，必须：

在自定义 _custom.scss 顶部设置 $enable-responsive-font-sizes: true;，且位置必须在 @import "bootstrap/scss/functions"; 和 @import "bootstrap/scss/variables"; 之后、@import "bootstrap/scss/bootstrap"; 之前
用 Dart Sass 或 Node Sass 重新编译，生成自己的 CSS 文件
若用 Ruby on Rails + bootstrap gem，确认 gem ≥ 4.3.1 且项目走 .scss 引入路径，而非直接 require "bootstrap"

硬塞 CSS 规则（如 h1 { font-size: calc(1.375rem + 1.5vw); }）只是模拟，不触发 RFS 的断点分级、系数校准和最小字号保护机制。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

RFS 的 `font-size()` 函数不是万能缩放器，参数和单位很关键

font-size(20px) 中的 20px 是“基准最大字号”，RFS 以它为上限，在视口宽度变化时线性缩小至下限（默认约 1rem）。传错值或单位，结果会反直觉。

别传 font-size(16px) 当基准——这会让大屏也只显示 16px，失去“越大越醒目”的设计意图
必须带单位：font-size(1.25rem) 合法，font-size(1.25) 报错；font-size(20px) 合法，font-size(20) 不合法
它只作用于声明的 font-size 属性，不影响 line-height、margin、padding，这些需单独处理或依赖 rem 继承
组件变量（如 $table-font-size、$btn-font-size）默认没被 font-size() 包裹，需手动重定义再 @import 才能同步缩放

表格、按钮、第三方插件字体不会自动响应，得单独干预

Bootstrap 的 .table、.btn、.alert 等组件类，其字体大小由独立 Sass 变量控制（如 $table-font-size），而这些变量默认未接入 RFS 流程。即使你开启了 $enable-responsive-font-sizes，表格文字仍保持固定尺寸。

解决方式只有两种：

Sass 项目：在 @import "bootstrap" 前重定义变量，例如 $table-font-size: font-size(14px);，确保它被包裹
CDN / CSS 项目：对目标选择器手写媒体查询 + calc()，例如 .table td { font-size: calc(0.875rem + 0.2vw); }
第三方插件（如 select2、flatpickr）完全不受影响，需用 .select2-container { font-size: font-size(1rem); }（Sass）或全局 html { font-size: clamp(1rem, 1.2vw + 0.8rem, 1.25rem); }（CSS）兜底