用clamp()替代纯vw设字体大小，如font-size: clamp(1rem, 2.5vmin, 1.75rem)，可避免小屏过小、大屏过大；同时line-height等需用em单位同步缩放，并注意safari地址栏切换导致的渲染延迟。
vw单位怎么设字体大小才不“忽大忽小”
直接用 vw 设 font-size 很容易在小屏上文字缩到看不清，大屏上又撑满一行。根本原因是 vw 是视口宽度的1%，而手机竖屏时视口宽度可能只有375px，16vw 就是 60px，远超阅读舒适范围。
实操建议：
- 别单独用
vw，比如font-size: 4vw;—— 这种写法在 iPhone SE 和 iPad 上表现天差地别 - 用
clamp()包一层更稳，比如font-size: clamp(1rem, 4vw, 1.5rem);，它会强制限制最小和最大值 - 注意：Chrome 82+、Firefox 79+、Safari 13.1+ 才支持
clamp()，旧版 Safari 需要加-webkit-前缀（但实际兼容性仍差，建议降级 fallback） - 如果必须兼容 iOS 12 或更早，优先用媒体查询 +
rem组合，而不是硬扛vw
clamp() 的三个参数到底怎么配才合理
clamp(min, preferred, max) 看似简单，但配错一个值，响应式就失效。常见错误是把 preferred 写成固定值（如 1.2rem），那就失去响应意义了。
实操建议：
-
min建议用rem（如1rem），确保小屏下至少有基础可读性（对应 16px） -
preferred推荐用vw或vmin，vmin更适合横竖屏都频繁切换的场景（比如 PWA 应用） -
max别贪大，1.5rem～2rem 足够，再大不仅难读，还可能破坏行高和布局流 - 示例：
font-size: clamp(1rem, 2.5vmin, 1.75rem);—— 这比纯vw更适应折叠屏或分屏模式
为什么 font-size 用 vw 后行高/间距全乱了
因为 vw 只影响字体大小，但 line-height、margin、padding 如果还是用 px 或固定 rem，比例就会失衡。典型现象是：文字变小了，行距却没缩，看起来挤；或者文字变大了，按钮高度没跟上，文字被截。
实操建议：
- 所有与文字强相关的尺寸（
line-height、padding、margin）尽量也用相对单位：em或rem - 避免写
line-height: 1.2;这种无单位值——它虽是推荐写法，但前提是父元素font-size稳定；而vw导致父字号动态变化，反而让line-height实际像素值飘移 - 更稳妥的是统一用
em：比如line-height: 1.4em;，它会随当前字体大小等比缩放 - 如果用了
clamp()，记得检查max值是否导致容器溢出——尤其在卡片、按钮等有固定height的组件里
移动端 Safari 对 vw 字体的特殊处理
iOS Safari 在地址栏收起/展开时会触发视口重算，但不会重绘文字尺寸，导致 vw 字体“卡住”在旧值，出现短暂错位或截断。这不是 bug，是渲染机制使然。
实操建议：
- 不要监听
resize去手动重设font-size—— 效率低且容易触发重排风暴 - 改用
vmin替代vw，比如font-size: clamp(1rem, 3vmin, 1.5rem);，它对地址栏变化更不敏感 - 若必须用
vw，可在body上加transform: translateZ(0);强制硬件加速，缓解闪动（但不能根治） - 真机测试务必包含 Safari 横竖屏切换、分屏、地址栏显隐全过程，模拟器无法复现该问题
真正麻烦的不是怎么写那行 clamp()，而是得同步检查所有依赖字号的布局模块——按钮、表单、标题层级、图标对齐……漏掉一个，响应式就断在那儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
