必须同时锚定根字号和生效viewport，否则clamp()、vw失准；viewport元标签须置于head最顶部，html上设font-size，文字统一用rem，line-height用无单位值。
不是 font-size 写错了，而是根字号没锚定、viewport 没生效——这两个条件缺一不可，否则所有 clamp()、vw 都会失准。
viewport 元标签必须放在 HTML 最前面
移动端文字过小，90% 是浏览器用默认 980px 宽度渲染，再整体缩放，导致 1rem 实际只有 8px。你写的 font-size: 1.5rem 看似合理，实际不可读。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须写在<head>最顶部，早于任何 CSS 或 JS - 不能靠 JavaScript 动态插入：iOS Safari 会直接忽略延迟注入的
viewport标签，哪怕只晚几毫秒 - 用 SSR 或构建工具（Vite/Next.js）时，检查 HTML 模板源码里是否真有这行，而不是只在组件里 mock
clamp() 必须设在 html 上，不能写在 body
body { font-size: clamp(14px, 2.5vw, 18px) } 只改 body 自身字号，子元素继承的是计算后的像素值，不是缩放比例。h1、p 等不会跟着等比放大。
- 正确写法：
html { font-size: clamp(14px, 2.5vw, 18px); }——rem唯一可靠基准只能是html - 所有文字类选择器统一用
rem：h1 { font-size: 2.5rem; }、p { font-size: 1.125rem; } - 避免混用：
1.25rem和16px同时出现，会在断点处造成字体跳变 - 第三方组件如
.ant-typography默认用em，需额外覆盖：.ant-typography { font-size: 1rem !important; }
preferred 值别硬套一个 vw 系数
clamp() 的中间值不是越“响应”越好，它本质是线性函数，而人眼对字号的感知是非线性的。iPhone SE（375px）上 4vw ≈ 15px，低于可读下限；4K 屏（3840px）上 4vw = 153.6px，远超视觉舒适区。
立即学习“前端免费学习笔记（深入）”；
- 小屏优先系数建议：2.8vw ~ 3.2vw（iPhone 小屏兜底更稳）
- 平板适配系数建议：2.2vw
- 桌面端建议：1.6vw ~ 1.8vw（避免大屏下占比失衡）
- 更稳妥写法：
html { font-size: clamp(16px, calc(1rem + 0.2vw), 22px); }，用calc()引入非线性过渡
line-height 必须用无单位数值
如果 font-size 用 clamp() 缩放，但 line-height 写死为 24px 或 1.4rem，就会出现小屏文字挤成一团、大屏字行空洞的问题。
- 始终用无单位值：
line-height: 1.6;、line-height: 1.2;—— 它会自动按当前font-size计算 - 标题行高建议 1.1–1.4，正文建议 1.5–1.8
- 慎用
vh或vw控制行高：滚动时视觉节奏易被打乱
真正容易被忽略的，从来不是怎么写 clamp()，而是 viewport 和 html { font-size } 这两个前提有没有同时成立。一个漏了，整个响应式字体就变成空中楼阁。
