必须将 clamp() 写在 html 元素上以统一 rem 基准，下限≥12px、上限≤64px，line-height 用无单位值，letter-spacing 用 vw/em，safari 12 需手动双写降级或 js 动态设置。
直接把 font-size 缩放逻辑写在 html 元素上，用 clamp() 控制基准，再统一用 rem 定义所有文字类尺寸——这是目前唯一能兼顾可读性、一致性与维护性的通用方案。
必须把 clamp() 写在 html 上，而不是 body
很多人在 body 上写 font-size: clamp(16px, 4vw, 24px)，结果发现标题没变大、按钮文字依旧僵硬。这是因为：
-
body的font-size只影响自身和未显式重设字号的直系子元素，不改变rem的计算基准 -
rem永远相对于html元素的font-size，改它才等于“调全站缩放尺子” - 第三方组件（如 Ant Design、Element Plus）默认依赖
rem或根字号，不改html就等于没动锚点
正确写法：
html {
font-size: clamp(14px, 2.5vw, 18px);
}
之后所有文字类都用 rem：
h1 { font-size: 2.5rem; }
p { font-size: 1.125rem; }
.btn { padding: 0.75rem 1.5rem; }
clamp() 三个参数的取值有明确安全区间
不是随便填个 clamp(1rem, 4vw, 3rem) 就能用，下限太低会模糊，上限太高会割裂布局：
- 下限建议 ≥
12px（或0.75rem）：iOS Safari 对小于该值的字体可能强制重映射，导致实际显示不一致 - 上限建议 ≤
64px（或4rem）：避免在 4K 屏上撑爆卡片或破坏行宽节奏 - 中间项别盲目套手机端系数：比如设计稿基于 1440px 宽度、标题为 28px，则理想系数是
28 / 1440 ≈ 1.94vw，而非沿用手机常用的3.5vw - 慎用
100vw：滚动条宽度会导致 iOS Safari 下跳变，95vw更稳
line-height 和 letter-spacing 必须协同响应
只调 font-size 不动行高，小屏下文字会挤成一团；不动字间距，大屏英文标题又显得松散：
-
line-height推荐用无单位数值（如1.5），它会随font-size自动缩放，比1.5rem更可靠 -
letter-spacing需带响应单位：标题可用letter-spacing: 0.05vw，正文建议0.02em，避免小屏负值导致字符重叠 - 别在 flex/grid 容器里靠
line-height垂直居中：它容易失效，改用align-items: center或place-content: center
兼容旧版 Safari 要加降级，且不能依赖 PostCSS 插件
clamp() 在 Safari 13.1+ 才完全支持，Safari 12 及更早版本会直接忽略整条规则：
- 降级必须手写两行，不能靠插件生成：
font-size: 1.125rem;<br>font-size: clamp(1rem, 2.5vw, 1.5rem);
-
@supports包裹写法可行但冗余，多数项目直接双写更轻量 - PostCSS 插件（如
postcss-clamp）不会自动加 fallback，它只转换单位，不解决兼容逻辑 - 如果必须支持 Safari 12，JS 动态设
document.documentElement.style.fontSize是唯一路径，但得加防抖，并确保首次渲染前执行
真正难的不是写对那行 clamp()，而是让所有文字类、所有第三方组件、所有行高与字距都跟上这个根字号变化节奏——漏掉任意一环，缩放就断层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
