直接原因是body的font-size仅影响自身字号，子元素继承计算后的像素值而非缩放比例；正确做法是将clamp设在html上以控制rem基准，并统一用rem定义所有文字类字号。
body { font-size: clamp(...) } 为什么没让全局字体变大
直接原因：body 上设 font-size: clamp(14px, 2.5vw, 18px) 只影响 body 自身的字号，而绝大多数子元素（比如 p、h2、.card-title）默认用的是 em 或无单位数值（如 line-height: 1.6），它们继承的是计算后的像素值，不是“相对 body 的缩放比例”。换句话说，body 缩了，但子元素没跟着“按比例放大”。
- 浏览器把
body { font-size: clamp(...)解析成一个具体像素值（比如在 2560px 屏上算出是 18px），然后所有未显式重设font-size的后代都以这个 18px 为基准继承——它不会让h1自动变成 36px，除非你写了h1 { font-size: 2em; } - 如果你只改
body，又没配html { font-size: 100%; }，那rem基准可能被用户系统设置或浏览器默认值干扰，导致clamp(1rem, ...)实际起点飘移 - 更隐蔽的问题：某些 CSS 框架（如 Tailwind、Bootstrap）或组件库会强制重置子元素字号（例如
h1 { font-size: 2rem; }），这时body的clamp完全被覆盖，毫无作用
怎么让 clamp 真正控制整页文字大小
核心思路：把缩放锚点放在根元素，再让所有文字类选择器统一基于它响应。
- 必须设
html { font-size: clamp(14px, 2.5vw, 18px); }，而不是body。因为rem单位永远相对于html，这是唯一可靠的全局缩放入口 - 所有需要响应式的文字容器，优先用
rem写字号：h1 { font-size: 2.5rem; }、p { font-size: 1.125rem; }。这样当html字号从 14px → 18px，它们等比放大 - 避免混用单位：别在同一个组件里既写
1.25rem又写20px，否则缩放断层。标题用rem，图标字体或代码块这种需固定尺寸的才单独用px - 第三方组件要检查：比如 Ant Design 的
.ant-typography默认用em，得额外加覆盖规则：.ant-typography { font-size: 1rem !important; }
大屏下字体还是太小？可能是 preferred 值压得太低
常见错误是沿用手机端的 2vw 或 2.5vw，结果在 3840px 屏幕上也才 76.8px —— 听起来大，但实际视觉占比可能仍不足。问题不在 clamp 失效，而在首选值没对齐大屏阅读习惯。
- 先确认设计基准：如果主文案在 1440px 设计稿中是 20px，那么对应
vw系数是20 / 1440 ≈ 1.39vw；若希望它在 3840px 达到 32px，则系数应调高到32 / 3840 ≈ 0.83vw—— 显然线性关系不成立，说明单纯靠vw不够，得靠max托底 - 更稳妥的做法：把
max设得足够大（如2.5rem或40px），同时提高preferred的系数（如clamp(1rem, 3.2vw, 2.5rem)），并在 2560px+ 屏幕真机测试是否撑破卡片或行高失衡 - 注意 Safari 的渲染上限：iOS WebKit 对超大字号（>72px）会主动截断到最近可用值，所以
max别盲目设6rem（≈96px），实测超过 48px 就容易失真
为什么加了 html clamp，小屏字反而糊了
不是 clamp 写错了，而是系统级字体缩放和 vw 计算冲突了。尤其 iOS 用户开了「更大字体」辅助功能时，vw 仍按物理视口算，但系统会二次放大渲染结果，导致文字边缘发虚、间距错乱。
立即学习“前端免费学习笔记（深入）”；
- 必须加
text-size-adjust: 100%;到html或body，禁用浏览器对移动设备的自动字号调整，否则clamp和系统缩放会打架 - 小屏下限不能只看数值：
clamp(12px, 2vw, 16px)在 iPhone SE（320px）上算出2vw = 6.4px，直接取12px，但 12px 低于 iOS 可读下限，用户需双指放大才能看清——建议下限至少14px或0.875rem（假设根字号 16px） - 别忽略
line-height：字号缩了，行高没动，小屏文字就挤在一起。用无单位值（如line-height: 1.5;）让它随rem自动缩放，比写24px安全得多
clamp 语法本身，而是根元素选择、单位一致性、系统辅助功能适配这三处。写完 html { font-size: clamp(...) } 后，务必在 iPhone SE、iPad Pro、27 寸 4K 屏三端实测，看文字是否在可读性与视觉权重间取得平衡。 
