clamp()需确保min
直接用 font-size: 4vw 会出事——小屏字太小、大屏字爆炸，必须加边界控制；clamp() 是目前最稳妥的解法，但配错参数就等于没写。
为什么 clamp(16px, 4vw, 24px) 在 iPhone 上没缩放效果
因为计算结果被截断了：iPhone SE 视口宽 320px，4vw = 12.8px，低于 min 的 16px，浏览器直接取 16px，整个中间项失效。这不是 bug，是 clamp 的设计逻辑——它只在 min 成立时才启用线性插值。
实操建议：
- 先算出 preferred 生效的视口区间：
min / vw系数是下限宽度，max / vw系数是上限宽度。比如clamp(16px, 4vw, 24px)只在 400px–600px 之间流动，之外全靠 min/max 卡死 - 小屏保底别硬设 14px——iOS 系统默认最小可读字号是 16px，低于它用户得双指放大才能看清
- 测试时别只看模拟器，真机连 Safari 地址栏收起/展开都会触发视口重算，可能卡住旧尺寸
怎么算出靠谱的 vw 系数，而不是拍脑袋填 2vw 或 3vw
靠设计稿锚定：如果你的 UI 设计稿是 1440px 宽，标题标注为 28px，那就用 28 / 1440 * 100 ≈ 1.94，写成 1.94vw。这样在 1440px 时刚好吻合，更宽时略增、更窄时略减，再由 clamp() 收束两端。
常见错误现象：直接套“移动端用 2–3vw”模板，结果在 375px 屏上 2.5vw = 9.375px，远低于可读下限。
实操建议：
- 优先用
vmin替代vw的场景：折叠屏、PWA 横竖屏频繁切换时，2.5vmin比2.5vw更稳 - 避免混用单位：
clamp(1rem, 2em, 1.5rem)无效——preferred必须是相对单位，且不能和min/max单位冲突 - 如果设计稿是 375px，标题标 20px，别写
20px + 2vw这种表达式（部分旧版 Safari 不支持 calc 内含 vw）
兼容老浏览器时，降级写法为什么不能用 @supports 包裹
因为 Safari 13.1–13.3 对 @supports (font-size: clamp()) 的解析有 bug，会导致整条规则被跳过，连降级值都失效。它不是不支持 clamp()，而是把 @supports 判断搞错了。
正确做法是层叠覆盖：
font-size: 18px; font-size: clamp(16px, 2.1vw, 24px);
浏览器从上到下解析，不认第二行的就用第一行。
实操建议：
- 别依赖构建工具自动降级——
postcss-preset-env对clamp()的 fallback 能力有限，无法转译成等效媒体查询 - 如果必须支持 iOS 12 或 IE，改用
rem + @media组合：先调html { font-size: 16px; }，再在断点里改根字号 - 加
text-size-adjust: 100%防止 iOS 用户开启「更大字体」后，系统缩放和 vw 计算叠加导致文字糊或挤
line-height、padding 为啥跟着一起乱，怎么修
因为 vw 只动了 font-size，但 line-height: 1.5 这种无单位值是按当前字体大小计算的——而字体大小本身在变，实际像素值就飘了。典型表现：小屏字缩到 14px，行高却还是 21px，看起来挤；大屏字涨到 32px，按钮高度没变，文字被截。
实操建议：
- 所有强关联文字的尺寸（
line-height、padding、margin）尽量用em：比如line-height: 1.4em会随当前字号等比缩放 - 避免在固定
height的容器（如按钮、卡片）里盲目用clamp()，先确认max值不会撑破布局 - 慎用
vh：地址栏收起时视口高度突变，字体闪跳不是 bug，是渲染机制使然，普通文本别碰
真正难的不是写出 clamp()，而是想清楚——这个文字到底需不需要流动？按钮标签缩到 12px 就失去点击目标，代码块缩放后字符换行错乱，这些地方宁可用固定 px 或带硬边界的 clamp(14px, 2vw, 16px)。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
