clamp() + vw 是最轻量、最推荐的字体自适应方案，兼顾平滑缩放与可读性底线；单独用 4vw 在小屏下过小（如 iphone se 仅 15px）、大屏下过大，且不响应系统字体设置、存在跳变与可访问性问题。
直接用 clamp() + vw 是最轻量、最推荐的方案，现代浏览器基本都支持，不用 JS 就能兼顾平滑缩放和可读性底线。
为什么不能只写 font-size: 4vw
单独用 vw 看似简单，实际在小屏上会缩得过小：iPhone SE（375px 宽）下 4vw 只有 15px，320px 屏更是跌到 12.8px，逼近浏览器强制渲染下限（Chrome 最小显示 12px），文字糊成一片；桌面端拉宽窗口时又可能撑得过大，破坏视觉层级。
- 滚动或缩放窗口时，字号会“呼吸式”跳变，打断阅读节奏
-
vw不响应系统字体放大设置（如 Windows “放大文本”设为 125%），损害可访问性 - 它适合装饰性文字，不适合正文、标题等主干内容
clamp() 的三个参数怎么填才不翻车
clamp() 顺序固定：最小值、首选值、最大值。常见错误是中间值用 vw 却没设好上下限。
- 安全写法示例：
font-size: clamp(14px, 2.5vw, 18px)—— 小于 14px 强制兜底，大于 18px 截断，中间线性过渡 - 别写成
clamp(12px, 4vw, 24px)：320px 屏下4vw≈ 12.8px，已接近不可读边缘；2560px 屏下则达 102.4px，标题会压垮布局 - 如果设计稿基于 750px 宽，可用
clamp(14px, 1.866vw, 18px)（因为 750 × 1.866% ≈ 14），比硬套公式更直观
必须加的兜底和隐藏陷阱
漏掉 <meta name="viewport" content="width=device-width, initial-scale=1">，clamp() 和 vw 全部失效——浏览器按 980px 宽度渲染，根元素基准错乱，所有自适应逻辑崩盘。
- 旧版 Android WebView（6–9）不支持
clamp()，必须加降级：font-size: 16px;放前面，再覆盖font-size: clamp(...); -
clamp()最小值别设低于 12px，否则 Chrome/Firefox 会强制按 12px 渲染，失去控制意义 - Safari 在横屏时
vw基于总屏幕宽度（含状态栏），可能导致计算偏差，建议用@media (min-aspect-ratio: 1/1)微调
真正难的不是写对那行 clamp()，而是判断要不要引入 JS：只有当你需要响应横竖屏切换、系统字体放大、DPR 变化或动态主题时，才值得动用 JS 控制根字号；其余情况，纯 CSS 就够了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
