clamp() + vw 是现代字体响应式最佳实践，避免 font-size: 4vw 导致小屏过小、大屏过大、不响应系统设置等问题；需设合理三值、viewport 元标签、CSS 降级及最小值≥12px。
直接用 clamp() + vw，不写 JS、不搞 rem、不配一堆媒体查询——现代浏览器全支持，且可读性、平滑度、可访问性都在线。
为什么别一上来就写 font-size: 4vw
它看着简单，但实际在小屏上会缩得过小：iPhone SE（375px 宽）下 4vw 只有 15px，320px 屏更是掉到 12.8px，逼近 Chrome 强制最小渲染值（12px），文字糊成一片；桌面拉宽窗口时又可能撑到 100px+，破坏层级。更关键的是：4vw 不响应系统字体放大设置（比如 Windows “放大文本”设为 125%），也不随横竖屏切换平滑过渡，滚动时还会“呼吸式”跳变。
它只适合装饰性文字，正文、标题、按钮文案一律绕开。
clamp() 的三个参数怎么填才不翻车
clamp() 顺序固定：最小值、首选值、最大值。常见错误是中间值用 vw 却没设好上下限。
立即学习“前端免费学习笔记（深入）”；
- 安全写法示例：
font-size: clamp(14px, 2.5vw, 18px)——小于 14px 强制兜底，大于 18px 截断，中间线性过渡 - 别写成
clamp(12px, 4vw, 24px)：320px 屏下 ≈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) 微调。
什么时候才值得动用 JS 控制字体大小
真正难的不是写对那行 clamp()，而是判断要不要引入 JS。
只有当你需要响应以下任意一种变化时，JS 才有必要：
- 横竖屏切换（
orientationchange） - 系统字体放大（
matchMedia('(prefers-reduced-motion)')或监听document.documentElement.style.fontSize变化） - DPR 动态变化（如从 2x 切到 3x）
- 深色/高对比度等动态主题
其余情况，纯 CSS 就够了——JS 不仅增加首屏延迟，还容易引发闪屏、重排、与第三方库冲突等问题。
