真正可靠的做法是用 rem 锚定根字号，再用 calc() 在断点间做线性插值；因 vw 受地址栏显隐、ios 动态缩放及与 rem 混用不可控影响，直接 calc(1rem + 1vw) 易导致横屏抖动与失准。
直接用 calc(1rem + 1vw) 做响应式字体，大概率会在 iOS Safari 或 Chrome 横屏切换时抖动、缩放失准；真正可靠的做法是用 rem 锚定根字号，再用 calc() 在断点间做线性插值，而非依赖视口单位直接计算。
为什么 calc() 混用 vw 和 rem 容易出问题
常见错误是写 font-size: calc(1rem + 0.5vw)，看似平滑，实则踩了三个坑：
-
vw受地址栏显隐影响：移动端 Safari 切换横竖屏时，vw值可能延迟更新，导致字体跳变 - iOS 动态字体缩放会覆盖
vw计算结果，用户开启「更大字体」后，vw基准失效 -
rem本身依赖html的font-size，而vw是绝对视口单位，两者混合会让计算逻辑不可控、难调试
用 calc() 在断点间线性插值的正确写法
核心是把变化范围收进 CSS 变量，让 calc() 只负责“中间过渡”，不碰原始单位：
- 先定义两个变量：
--min-width: 320px（最小断点）、--max-width: 1280px（最大断点） - 再定义字号区间：
--min-font: 16px、--max-font: 24px - 在
:root里用媒体查询设置变量值，而不是直接改font-size - 最后用
calc()插值：font-size: calc(var(--min-font) + (var(--max-font) - var(--min-font)) * ((100vw - var(--min-width)) / (var(--max-width) - var(--min-width))));
这段代码本质是「两点确定一条直线」，只在预设断点内生效，避开 vw 的干扰区。
配合 rem 动态根字号的轻量 JS 方案
如果需要更精细控制（比如适配 DPR 或强制最小字号），可用极简 JS 替代纯 CSS：
- 不监听
resize——太频繁，改用orientationchange+load事件即可 - 用
document.documentElement.clientWidth而非window.innerWidth，避免滚动条干扰 - 设定安全上下限：
fontSize = Math.min(Math.max(width / 10, 14), 20) + 'px'，防止小屏过小或大屏过大 - 后续所有文字用
rem，例如h1 { font-size: 1.8rem; }，此时1rem就是上面算出的动态值
这个方案比全 CSS 更可控，且兼容 IE11（需补 attachEvent）。
clamp() 是更现代但需注意兼容性的替代方案
如果你只支持 Chrome 88+、Safari 14.1+、Firefox 79+，clamp() 是最简洁的写法：
-
font-size: clamp(1rem, 4vw, 1.5rem);表示「不低于1rem，不高于1.5rem，理想值是4vw」 - 但它仍受
vw缺陷影响，所以建议仅用于辅助场景，如按钮文字、卡片标题等非正文内容 - 生产环境务必加降级：
font-size: 1.2rem; font-size: clamp(1rem, 4vw, 1.5rem);
真正关键的正文文字，别图省事——锚定断点 + 变量插值才是目前最稳的路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
