calc()中rem与vw混用会失效，因CSS规范禁止不同基准单位加减；安全方案为分段式CSS变量+calc()或clamp()配合含vw的calc()表达式。
直接用 calc() 混合 rem 和 vw 会失效，真正可用的方案只有两类：分段式 CSS 变量 + calc()，或 clamp() 配合线性表达式。
为什么 calc(1rem + 1vw) 在多数浏览器里不生效
这不是 bug，是 CSS 规范明确禁止的：不同基准的长度单位不能在 calc() 中加减。rem 依赖根元素 font-size，vw 依赖视口宽度，二者无换算关系。浏览器会直接丢弃整条声明，降级为继承值或默认值。
- 安全写法只有：
calc(16px + 0.25vw)、calc(1rem + 0.25vw)（前提是html { font-size: 16px }固定不变） -
em同样不可混用——它随父级变化，叠加vw会导致不可预测的嵌套放大 - 开发工具里看到“计算后值”不等于实际渲染值；得看最终 computed style 的
font-size是否有数值
分段式 CSS 变量怎么设才不踩坑
核心是把断点逻辑收进 :root，用媒体查询切换变量，再让 calc() 做纯数值插值。变量只存数字，单位靠 1px 或 1rem 补全。
- 定义变量时别带单位：
--fs-h1: 32，不是--fs-h1: 32px - 使用时必须显式转换单位：
font-size: calc(var(--fs-h1) * 1px)；calc(var(--fs-h1) px)是语法错误 - 避免用单个变量覆盖全部字号——比如
--font-scale全局乘系数，容易让小屏正文也跟着放大失真 - 移动端务必加
html { -webkit-text-size-adjust: 100% }，否则 iOS Safari 会无视变量强行放大 14px 以下文字
clamp() 的三个参数怎么配才真流动
clamp() 不是“最小、中间、最大”，而是“下限、首选值、上限”，且首选值必须含可变单位（如 vw），否则字体永远卡死在某个值上。
立即学习“前端免费学习笔记（深入）”；
- 典型失效写法：
clamp(1rem, 1.2rem, 1.5rem)—— 中间是固定值，毫无响应性 - 正确写法：
font-size: clamp(1rem, calc(0.8rem + 0.375vw), 1.5rem)；注意calc()必须包裹混合单位表达式 - 系数要反向验证：用 375px 和 1440px 两个锚点推算斜率，否则在 iPhone SE 上
2.5vw只有 ~9px，直接被下限截断 - Safari ≤ 13.1 完全不支持
clamp()；必须手动降级：font-size: 1.125rem; font-size: clamp(...);
最易被忽略的是根元素 font-size 被第三方库或 JS 动态覆盖——一旦 html 的 font-size 变了，所有基于 rem 的 clamp() 和变量都会偏移。稳的做法是把基准抽成 --base-font-size 变量，再用 calc(1rem * var(--base-font-size)) 统一控制，绕过直接操作 html 样式。
