vw 必须配合 viewport meta 标签使用，否则 ios safari 会以 layout viewport（如980px）为基准计算，导致 100vw ≠ 设备宽度、calc() 错误、布局异常及文字模糊等问题。
vw 必须配 viewport meta，否则计算基准就错了
不加 <meta name="viewport" content="width=device-width, initial-scale=1.0">，iOS Safari 会按 layout viewport（比如 iPhone X 默认是 980px）算 1vw，结果 100vw ≈ 980px，而不是你期望的 375px。这时候所有 calc(100vw - 20px) 都会错位、留白异常、文字模糊。
常见漏掉的情况：
- 微信 X5 内核早期版本未触发 viewport 重置，
vw仍按 980px 计算 - 写了
maximum-scale=1或user-scalable=no，干扰 layout viewport 初始化 - 在 iframe 里用 vw，父页面没设好 viewport，子页面也跟着失效
calc() 里混用 % 和 vw 容易失效，优先同单位运算
calc(100% - 2rem) 没问题，但 calc(100vw - 2rem) 在旧版 Safari（iOS 15.4 之前）可能丢掉 rem 部分，或布局阶段未同步计算上下文导致尺寸抖动。
更稳的写法：
- 统一用视口单位：
calc(100vw - 2em)或calc(100vw - 32px) - 统一用相对单位：
calc(100% - 2em)（前提是父容器宽度已确定） - 要扣 header 固定高度？别硬写
calc(100vh - 64px)，改用max-height+height: 100%组合，或直接上container查询 +clamp()
字体大小慎用 clamp() 套 calc()，Safari 支持不稳定
像 font-size: clamp(1rem, calc(1rem + 1vw), 1.5rem) 这种写法，在移动端 Safari 上部分机型会忽略 calc() 段，退回到固定值——不是语法报错，而是渲染时直接跳过。
替代方案更可控：
- 单层
clamp()：font-size: clamp(1rem, 2.5vw, 1.5rem)（iOS Safari 13.4+ 稳定支持） - 用
calc()做线性过渡：font-size: calc(1rem + 0.5vw)，再套一层min()/max()限幅（需检查浏览器支持） - 对关键标题，宁可多写一两条媒体查询，也别赌嵌套 calc 的兼容性
border/padding 会“撑出”calc 结果，box-sizing 不自动修正
width: calc(100vw / 3) 算出来的是 content 宽度目标值；如果你又加了 padding: 1rem 和 border: 2px solid，总宽度 = content + padding × 2 + border × 2，远超 1/3 视口。
真要让“总宽度 = 1/3 视口”，得手动把 padding/border 扣进去：
-
width: calc((100vw - 2 * 1rem - 2 * 2px) / 3)，再设padding: 1rem、border: 2px solid - 或者直接放弃 calc 分割，改用
display: flex，它天然按总容器分配空间，box-sizing: border-box也能生效 - border 响应式？别依赖缩放，显式写
border-width: calc(1px * 1)（虽然傻，但能触发相对计算）
vw + calc 的流体排版，真正难的不是写法，而是每一步都在和浏览器布局阶段的时机博弈——viewport 设置是否生效、父容器宽度是否已知、CSS 变量是否被提前解析、box-sizing 是否覆盖到所有层级。这些细节一旦漏掉一个，视觉上只是“有点不对劲”，调试时却很难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
