直接写font-size: 4vw会失控，因vw纯线性换算致小屏过小（iphone se约12.8px）、大屏过大（4k屏达153.6px）；clamp()需min≤preferred≤max且单位兼容，preferred须用vw或calc()，min建议14px/1rem保可读，max不超2.5rem防溢出，必须配viewport meta和显式fallback降级。

直接写 font-size: 4vw 会失控，不是响应式而是“跳变式”

因为 vw 是纯线性换算：1vw = 视口宽度的 1%。iPhone SE（320px 宽）下 4vw ≈ 12.8px，肉眼难辨；4K 屏（3840px）下同一值变成 153.6px，标题直接顶穿导航栏。这不是设计意图，是单位裸用导致的尺度崩塌。

clamp() 的三个参数必须单位兼容、量级合理

常见错误是混用 em 和 vw 做 preferred 值，比如 clamp(1rem, 2em, 2.5rem) —— em 依赖父级 font-size，而父级可能已被其他规则覆盖，导致中间值跳变、不可预测。

• min 推荐用 14px 或 1rem，兜底小屏可读性
• preferred 必须用 vw 或 calc()，如 2.5vw 或 calc(1rem + 0.3vw)
• max 别超过 2.5rem（约 40px），否则高分屏上文字会撑出容器或遮挡 UI 元素

移动端必须配 <meta name="viewport">，否则 vw 计算基准错乱

没加这行 meta 标签时，iOS Safari 会按 layout viewport（通常 980px）算 1vw，结果手机上字体大得离谱。正确写法是：

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

<meta name="viewport" content="width=device-width, initial-scale=1">

漏掉它，clamp() 再稳也没用 —— 基准错了，整个缩放链就偏了。

Safari 13.1 以下不支持 clamp()，降级必须显式声明

@supports 检测不能只包裹样式，要配合 fallback 才生效。错误写法：font-size: clamp(1rem, 4vw, 2.5rem); —— 老浏览器直接忽略整条规则。

• 正确降级：font-size: 1.25rem; font-size: clamp(1rem, 4vw, 2.5rem);
• PostCSS 插件（如 postcss-clamp）不会自动加 fallback，得手写
• 中英文混排时，zh 类建议 min 提高到 16px，汉字在小尺寸下比英文更易发虚

实际项目里，最常被忽略的是视口 meta 和 fallback 顺序 —— 看似细枝末节，但一漏就全站字体失准。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！