vw与rem混合计算常“没反应”是因为二者基准不同步：rem依赖根字体大小（可能不重排），vw依赖视口宽度（键盘/横竖屏会重算），且box-sizing未设时padding/border会撑破calc结果。
直接用 calc(100vw - 2rem) 很可能在 Safari 或小屏设备上失效——不是语法错，而是单位混算时盒模型、视口行为、精度链路全在暗处咬你一口。
为什么 vw 和 rem 混合计算常“看起来没反应”
根本原因不是 calc 不支持混合单位，而是 rem 的基准（:root font-size）和 vw 的基准（当前视口宽度）不在同一时间轴上对齐。尤其在 iOS Safari 中，键盘弹出、横竖屏切换会重算 100vw，但 rem 值不会自动重排，导致减法结果卡在旧值；更隐蔽的是，如果父容器没设 box-sizing: border-box，padding/border 会额外撑开，让 calc() 算出的“可用宽度”被视觉截断。
常见现象包括：
-
width: calc(100vw - 2rem)在 iPhone 上渲染为满屏，毫无收缩 - 调试面板显示 computed width 正确，但元素实际溢出或留白异常
- 页面首次加载正常，滚动/聚焦输入框后尺寸突变
移动端安全写法：用 CSS 变量解耦设计稿与视口逻辑
硬写 html { font-size: 13.3333vw; } 是自埋雷——换设计稿就得改 magic number，且无法响应最小字号限制。正确路径是把设计稿宽度（如 --psd: 750）和目标根字号（如 --rfs: 100）抽成变量，由 calc 动态推导：
html {
--psd: 750;
--rfs: 100;
font-size: calc(100vw / var(--psd) * var(--rfs));
}
这样改设计稿只需调 --psd，全链路自动重算。但要注意：
- 必须在
中声明<meta name="viewport" content="width=device-width, initial-scale=1">，否则100vw无意义 - 避免在 calc 里做
100vw * 0.133333这类浮点乘法，除法更可控 - 首次渲染可能取旧值，可在 JS 初始化后加
document.body.offsetHeight强制重排
flex 布局下 calc 宽度被忽略？改用 flex-basis
写 .sidebar { width: calc(100vw - 240px); } 却不生效，大概率因为父容器是 display: flex——flex 子项的主轴尺寸由 flex-basis 主导，width 被忽略。
正确写法是：
.sidebar {
flex: 0 0 calc(100vw - 240px);
}
同时必须给兄弟元素（如主内容区）加 min-width: 0，否则长文本或 <pre class="brush:php;toolbar:false;"></pre> 会让 flex 项拒绝收缩，calc 形同虚设。另外注意：
-
flex-basis支持 calc，但不支持 CSS 变量（flex-basis: var(--w)静默失败） - 收起侧边栏时，别只设
flex-basis: 0，要配overflow: hidden+transition: flex-basis 0.3s，否则 Safari 动画错帧
兜底比炫技重要：媒体查询必须写在 calc 后面
纯 calc 无法解决极端场景：小屏上 4vw 字体可能被 iOS 强制缩到 12px，大屏上又可能撑爆容器。这时候媒体查询不是备选，是必需：
@media (max-width: 375px) {
html { font-size: 37.5px; } /* 1rem = 37.5px，保底 */
}
@media (min-width: 750px) {
html { font-size: 75px; } /* 1rem = 75px，封顶 */
}
关键点：
- 这些规则必须写在 calc 规则之后，靠 CSS 层叠覆盖
- 不要依赖
min-font-size（仅 Safari 支持，且不影响 padding/width 等 rem 计算） - 若需兼容 Safari 15.4 以下，
min()/clamp()要降级为媒体查询 + calc 组合
真正难的从来不是写出 calc(100vw - 2rem)，而是想清楚这个表达式在 iOS 键盘弹出时是否还成立、在 320px 屏上是否被强制截断、在 flex 容器里有没有被 flex-basis 覆盖——每个看似简单的 calc，背后都是浏览器渲染引擎、盒模型规则、移动端视口行为的三方博弈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
