直接原因是viewport元标签缺失或位置错误，以及html{font-size}未正确设置；二者缺一不可，否则clamp()、vw全部失准；viewport必须置于head最顶部，html上设根字号，文字统一用rem。
直接原因几乎总是 viewport 元标签缺失或位置错误，以及 html { font-size } 没有正确设置——这两个条件缺一不可，否则所有 clamp()、vw 都会失准。
viewport 元标签必须在
移动端文字过小，90% 是浏览器用默认 980px 宽度渲染再整体缩放，导致 1rem 实际只有 8px。你写的 font-size: 1.5rem 看似合理，实际不可读。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须写在最顶部，早于任何 CSS 或 JS - 不能靠 JavaScript 动态插入：iOS Safari 会直接忽略延迟注入的
viewport标签，哪怕只晚几毫秒 - 用 SSR 或构建工具（Vite/Next.js）时，检查 HTML 模板源码里是否真有这行，而不是只在组件里 mock
html { font-size } 是 rem 唯一可靠基准
body { font-size: clamp(14px, 2.5vw, 18px) } 只改 body 自身字号，子元素继承的是计算后的像素值，不是缩放比例。h1、p 等不会跟着等比放大。
- 正确写法：
html { font-size: clamp(14px, 2.5vw, 18px); } - 所有文字类选择器统一用
rem：h1 { font-size: 2.5rem; }、p { font-size: 1.125rem; } - 避免混用：
1.25rem和16px同时出现，会在断点处造成字体跳变 - 第三方组件如
.ant-typography默认用em，需额外覆盖：.ant-typography { font-size: 1rem !important; }
Sass 混合宏里 clamp() 的单位陷阱
常见错误是把 min 和 max 设成固定像素（比如 clamp(16px, 2vw, 24px)），结果在小屏上字体突然跳变——因为 2vw 在 320px 宽度下只有 6.4px，远低于可读下限。
-
clamp()三个参数必须同单位或都用相对单位：16px、4vw、24px是安全组合 - 推荐用
rem写min/max，避免根字体缩放时失效：clamp(1rem, 4vw, 1.5rem) - 若项目用了动态根字体（比如 JS 根据
dpr设置html的font-size），clamp()就不是“自适应”，而是“错位适应”。此时应禁用 JS 动态改根字体，统一用html { font-size: 100% } - 别混用
rem和em：clamp(1rem, 2em, 1.2rem)会因父元素字体变化彻底失控
调试时优先检查计算后的最终 CSS 值
开发者工具里看到 font-size: clamp() 并不等于它真在生效——可能被更高优先级规则覆盖，也可能被 @supports 屏蔽后退到了 fallback 值。
- 打开 DevTools → Elements → 找到对应元素 → 查看 Computed 面板里的
font-size实际计算值 - 确认是否触发了
@supports降级逻辑：旧版 Safari（font-size - 如果用了动态根字体又没禁用，横竖屏切换或页面缩放时容易出现字号抖动，这是最隐蔽也最难复现的问题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
