BS5 RFS 字体缩放
学习使用 RFS（响应式字体缩放）让文本在不同屏幕尺寸下自动调整大小。 · 难度：入门 · +15XP
RFS 简介
RFS 是 Bootstrap 5 内置的响应式字体缩放引擎，它根据视口宽度自动调整字体大小，避免在小屏幕上文字过大或过小。默认启用，无需额外配置。
工作原理
| 属性 | 说明 |
|---|---|
$font-size-base | 基础字体大小（1rem） |
$rfs-factor | 缩放因子（默认10） |
$rfs-unit | 单位（rem 或 px） |
代码示例
<h1 class='display-1'>大标题会自动缩放</h1>
<p>普通段落也会响应式调整。</p>RFS 默认影响所有标题（h1-h6）和 display 类。你也可以通过 Sass 变量自定义。
练习提示
在右侧代码中，添加一个 h1 和一个 h6 标题，调整浏览器窗口大小观察字体变化。尝试在 p 标签上添加 .fs-1 类来测试 RFS 对非标题元素的影响。