直接结论：不是 font-size 写小了，而是根字号没锚定在 html 上，且 viewport 缺失——这两个问题不解决，clamp() 或 vw 都会失效；viewport 元标签必须置于 html 最前面，html{font-size} 必须设 clamp() 才生效。
直接结论：不是 font-size 写小了，而是根字号没锚定在 html 上，且 viewport 缺失 —— 这两个问题不解决，clamp() 或 vw 都会失效。
viewport 元标签必须加在 最前面
移动端文字过小，90% 情况下是因为浏览器用默认 980px 宽度渲染页面，然后整体缩放，导致 1rem 被压缩成不到 10px。你写的 font-size: 1.5rem 看似合理，实际渲染可能只有 8px。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须放在所有 CSS 和 JS 之前，不能靠 JavaScript 动态插入 - iOS Safari 会忽略延迟注入的 viewport 标签，哪怕只晚几毫秒
- 如果用了 SSR 或构建工具（如 Vite、Next.js），检查 HTML 模板里是否真有这行，而不是只在组件里 mock
clamp() 必须设在 html 上，不能写在 body
很多人把 font-size: clamp(14px, 2.5vw, 18px) 写在 body 上，结果发现 h1、p 全都不跟着变 —— 因为 rem 单位永远相对于 html 元素，body 的字号只是普通继承值，不参与 rem 计算。
- 正确写法：
html { font-size: clamp(14px, 2.5vw, 18px); } - 所有文字类选择器统一用 rem：
h1 { font-size: 2.5rem; }、p { font-size: 1.125rem; } - 避免混用：
1.25rem和16px同时出现，会导致某些断点下字体突然跳变 - Tailwind 或 Ant Design 等库可能重置子元素字号，需额外覆盖：
.ant-typography { font-size: 1rem !important; }
小屏下 clamp 的 preferred 值容易压得太低
iPhone SE（375px 宽）上 4vw 只有 15px，比设计稿要求的最小可读尺寸（通常 ≥16px）还小；而 clamp(16px, 4vw, 24px) 在这里会取 16px，看似安全，但若设计基准是 1440px 下 20px，则 4vw 在 375px 实际对应 15px，视觉密度已偏高。
- 推荐用
clamp(16px, calc(1rem + 1.2vw), 24px)替代纯 vw，让小屏起点更稳 - 实测更稳妥的系数：iPhone 小屏用
2.8vw ~ 3.2vw，平板用2.2vw，桌面用1.6vw—— 不是固定一个 vw 值拉到底 - 别信“vw 就是响应式”，它本质是线性函数，而人眼对字号的感知是非线性的；clamp 的 min/max 才是兜底关键
真正容易被忽略的是：viewport 和 html{font-size} 必须同时生效，缺一不可。clamp() 写得再漂亮，viewport 没加，rem 就是空中楼阁；viewport 加了，但根字号没设，所有 rem 都按浏览器默认 16px 算，和你的设计稿完全脱节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
