最推荐用 clamp() 函数实现字体响应式缩放，语法为 font-size: clamp(最小值, 理想值, 最大值)，支持平滑过渡、无需 js、兼容现代浏览器，并需注意单位统一、vw 基准及降级方案。
最推荐用 clamp() 函数，它能自动在最小值、理想值和最大值之间平滑缩放，不跳变、不依赖 JS、一行 CSS 就搞定。
用 clamp() 实现平滑过渡
语法是 font-size: clamp(最小值, 理想值, 最大值)，浏览器实时计算并限制范围：
-
最小值：保障小屏可读性，比如
14px或0.875rem（iOS 推荐不低于 14px） -
理想值：通常用
vw单位，如3.2vw，让字号随屏幕宽度线性变化 -
最大值：防止大屏下文字失控，比如
24px、1.5rem或2.25rem（视设计系统而定）
示例：font-size: clamp(14px, 3.2vw, 24px);
在 428px 宽手机上 ≈ 14px，在 1440px 宽显示器上 ≈ 24px，中间全程平滑过渡。
避免常见坑点
单位必须统一，不能混用 px 和 em；vw 基准是整个视口宽度，含滚动条——建议用 90vw～95vw 更稳；别直接写 100vw，iOS Safari 下可能抖动。
- 小屏下限别低于 14px，否则用户要双指放大才能看清
- 大屏上限建议控制在 24–32px 之间，标题可放宽到 48px，但需确认容器是否撑得开
- 如果设计稿基准是 375px 下 16px，可用
clamp(14px, calc(16px + 0.8vw), 24px)类推
兼容性与降级方案
clamp() 在 Chrome 88+、Firefox 79+、Safari 14.1+ 原生支持。旧版 Safari（如 iOS 13.7 及更早）不识别，需加降级：
- 写法示例：
font-size: 16px; font-size: clamp(14px, 3.2vw, 24px); - 不要只靠
@supports包裹，有些构建工具会把clamp()编译掉 - 关键正文建议保留
rem配合媒体查询兜底，比如小屏设html { font-size: 14px; }
不推荐纯媒体查询做字体过渡
断点方案适合布局切换（比如栅格从 4 列变 2 列），但用于字体容易产生“台阶感”：
- 两个断点之间字号固定，中间尺寸无法覆盖
- 比如 iPad Pro 12.9"（1024px）和 Surface Laptop Studio（1044px）只差 20px，却可能跨一个断点，视觉突兀
- 若坚持用媒体查询，至少配合
calc()插值，例如font-size: calc(1rem + 0.4vw);，再用断点封住上下限
