直接用 font-size 媒体查询维护成本高、缩放不连续，易在中间尺寸“卡住”；clamp() 函数以 clamp(1.125rem, 4.5vw, 2.25rem) 形式实现平滑响应式字体，min/max 用 rem 保底线与上限，preferred 用 vw 控制线性缩放，兼容现代浏览器，旧环境需 @supports 降级。
为什么直接用 font-size 的媒体查询不够用
响应式文字大小光靠一堆 @media 规则写死断点，维护成本高、缩放不连续，而且在 iPad Pro 或折叠屏等中间尺寸上容易出现“卡在两个断点之间”的尴尬。浏览器原生 clamp() 函数能用一个声明覆盖整个视口范围，让字体在最小值和最大值之间平滑过渡，这才是现代方案的核心。
clamp() 的三个参数怎么配才合理
格式是 clamp(min, preferred, max)，但很多人把 preferred 写成固定像素值（比如 20px），结果失去响应性。真正有效的写法是用相对单位（vw 或 rem）作为中间值，并控制缩放斜率：
-
min用rem（如1.125rem），保证小屏可读性底线 -
preferred用vw（如4.5vw），让它随视口线性增长 -
max用rem（如2.25rem），防止大屏下文字过大失衡
示例：font-size: clamp(1.125rem, 4.5vw, 2.25rem); —— 在 320px 宽度时取 1.125rem（18px），在约 720px 时达到 4.5vw（≈32px），之后锁定在 2.25rem（36px）。
如何与 Bootstrap 的排版系统共存不冲突
Bootstrap 5+ 默认禁用 font-size 的响应式根设置（即没开 root-font-size 相关 Sass 变量），所以直接给 .h1 类加 clamp() 是安全的。但要注意两点：
- 不要覆盖 Bootstrap 的
font-size基础变量（如$font-size-base），否则影响全局行高、间距计算 - 若需统一管理标题层级，建议在自定义 CSS 中重写选择器，例如：
.h1 { font-size: clamp(1.5rem, 5.2vw, 3rem); } - 避免在内联样式或
style属性里写clamp()，部分旧版 Safari 对它的解析不稳定
哪些设备或浏览器需要额外兜底
clamp() 在 Chrome 88+、Firefox 79+、Safari 14.1+ 原生支持，但 iOS Safari 14.0 和 Android WebView（尤其旧版）可能不识别。如果必须兼容这些环境：
- 用
@supports包裹clamp()声明，再在外面写一层降级的font-size - 例如：
p.lead { font-size: 1.25rem; } @supports (font-size: clamp(1rem, 1vw, 2rem)) { p.lead { font-size: clamp(1.125rem, 3.8vw, 1.5rem); } } - 别依赖 PostCSS 插件自动补全——
clamp()无法被可靠地 polyfill，强行转成 JS 计算反而拖慢首屏
真正麻烦的不是写法，而是设计时没想清楚缩放区间：vw 系数太陡，小屏字就糊；太缓，大屏又显小。多测几台真机，比调十次 clamp() 参数更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
