直接用 calc(1rem + 1vw) 做响应式字号会因 iOS Safari 动态缩放、地址栏显隐及浏览器最小字号限制导致抖动或失效；应改用 CSS 变量锚定断点，calc() 仅负责线性插值。
直接用 calc() 混 vw 做响应式字号，会在 iOS Safari 动态字体缩放、地址栏显隐、用户缩放等场景下抖动或失效；真正可控的方式是把变化锚定到明确断点，由 CSS 变量接管状态切换，calc() 仅负责线性插值。
为什么不能直接写 font-size: calc(1rem + 1vw)
这种写法看似简洁，但实际运行中会暴露三个硬伤：
-
vw基于视口宽度，而用户缩放、iOS 地址栏收起/展开、甚至「辅助功能→更大字体」开关都会临时改变视口尺寸，导致字号跳变 - iOS Safari ≤15.4 对
calc()中vw的重计算不及时，横屏切换后字号卡在旧值 - 没有下限控制，小屏下
1rem + 1vw可能算出低于 12px 的字号，触发浏览器最小字号限制（如 Chrome 强制 ≥12px），造成不可预测截断
用 :root 变量 + 媒体查询分段锚定断点
核心是把“多大屏宽对应多大字号”这个逻辑从数学公式里抽出来，交给媒体查询控制变量值，calc() 只做中间过渡：
- 在
:root中定义两个变量：--fs-min（最小屏宽对应字号）、--fs-max（最大屏宽对应字号） - 用媒体查询在关键断点（如
320px、768px、1280px）更新这两个变量 -
font-size改为calc(var(--fs-min) + (var(--fs-max) - var(--fs-min)) * ((100vw - 320px) / (1280 - 320)))—— 这是线性插值公式，只在已知区间内平滑过渡
示例：
html
:root {
--fs-min: 1rem;
--fs-max: 1.5rem;
}
@media (min-width: 320px) { :root { --fs-min: 1rem; } }
@media (min-width: 768px) { :root { --fs-max: 1.25rem; } }
@media (min-width: 1280px) { :root { --fs-max: 1.5rem; } }
<p>h1 {
font-size: calc(var(--fs-min) + (var(--fs-max) - var(--fs-min)) * ((100vw - 320px) / (1280 - 320)));
}</p>
注意 calc() 在 font-size 中的单位一致性
calc() 算出来的结果必须是合法的
- 不能混用
rem和px：比如calc(var(--fs-min) + 2px)，若--fs-min是1rem，则整个表达式非法 - 变量定义时就统一单位：
--fs-min: 1rem、--fs-max: 1.5rem，后续所有计算都基于rem - 如果后端或设计系统给的是像素值（如 16px、24px），可统一转为
rem：假设根字体为 16px，则16px = 1rem，24px = 1.5rem
移动端需额外处理动态字体缩放
iOS 的「更大字体」设置会让 rem 自动放大，但 vw 不会同步变——这会导致插值公式失准。稳妥做法是：
- 禁用用户缩放干扰：在
中去掉user-scalable=no（不推荐） - 改用
clamp()替代：现代方案是font-size: clamp(1rem, 1rem + 1.5vw, 1.5rem)，它天然支持上下限，且 Safari 15.4+ 已稳定支持 - 若必须兼容老 Safari，则变量值改用
px单位，并配合@supports (font-size: clamp(...))降级
真正麻烦的不是公式怎么写，而是你得想清楚：这个字号到底要响应什么？是屏幕宽度？用户偏好？还是内容密度？变量只是工具，断点才是决策点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
