Bootstrap的fs-*类本身不响应式，因只定义静态font-size且无媒体查询；需叠加断点后缀（如fs-md-3）并按升序书写（如fs-5 fs-md-4 fs-lg-3）才能实现多断点字体缩放。
Bootstrap 5 的 fs- 工具类本身不响应式，必须显式叠加断点后缀（如 fs-md-3）才能在不同屏幕宽度下切换字体大小；直接写 fs-4 只会固定一个尺寸，不会随视口变化。
为什么 fs-4 单独用不响应式
Bootstrap 的 fs-* 类（如 fs-1 到 fs-6）只定义一组静态 font-size 值，没有内置媒体查询。它们作用于所有断点，相当于“默认值”。图标是 inline 元素，依赖父容器的 font-size 缩放，所以单靠 fs-4 无法实现「小屏大、大屏小」的效果。
-
fs-4在 xs、sm、md、lg 下都生效，且值固定为1.25rem（约 20px） - 想让它在
md断点起变小，必须额外加fs-md-3覆盖 - CSS 层叠规则要求：断点类必须按从小到大顺序书写，否则会被覆盖
fs- 断点类怎么组合才生效
正确写法是把基础类放在最前，再按断点升序追加覆盖类。Bootstrap 会从左到右解析，后写的类在相同断点下优先级更高。
- 推荐写法：
fs-5 fs-md-4 fs-lg-3→ xs/sm 用fs-5（1.5rem），md 起切到fs-4（1.25rem），lg 起再切到fs-3（1rem） - 错误写法：
fs-lg-3 fs-md-4 fs-5→ 所有断点都走fs-5，因为fs-5没有断点前缀，覆盖了所有情况 - 注意：
fs-类只改font-size，不改line-height或margin，若图标嵌在按钮或卡片里，需同步检查padding是否协调
图标缩放失效的常见原因
即使写了 fs-sm-4 fs-lg-2，图标也可能没变化——问题往往不在类名本身，而在上下文。
- 图标不是直接子元素：比如
<div class="col"><span><i class="bi bi-x fs-3"></i></span></div>，fs-3作用在<i></i>上，但<span></span>没设display: inline-block或未继承font-size，导致缩放不传递 - 用了
<img src="logo.svg" alt="Bootstrap 5 响应式图标大小修改 fs-工具类" >却套fs-类：SVG 图片不是字体图标，font-size对它无效；只有<i class="bi bi-xxx"></i>这类基于伪元素或 inline SVG 的图标才响应 - Bootstrap Icons CSS 没加载：浏览器控制台报
Failed to load resource或图标显示为空白方块，fs-再多也没用 - 自定义 CSS 重置了
font-size：比如全局写了i { font-size: 1rem !important; }，会强行覆盖所有fs-类
需要流体缩放时别硬凑 fs- 类
如果目标是「视口每增大 100px，图标缩小 0.1rem」这种连续变化，fs- 的离散断点就不够用。这时得放弃工具类，改用原生 CSS。
- 可行方案：给图标容器加自定义类，如
bi-fluid，然后写@media (min-width: 576px) { .bi-fluid { font-size: clamp(1.25rem, 4vw, 1.5rem); } } - 注意
clamp()兼容性：Chrome 88+、Firefox 79+、Safari 14.1+ 支持，IE 完全不支持 - 别混用：不要在同一个元素上既写
fs-4又写font-size: clamp(...)，后者会被前者覆盖（除非加!important，但不推荐）
真正卡住人的，往往是以为写了 fs-md-3 就万事大吉，却没检查图标是否真的以字体形式渲染、父容器是否阻断了 font-size 继承、或者 CDN 链接根本没加载成功。
