vw能实现全机型自适应，但前提是layout viewport必须对齐设备物理宽度；未加viewport meta标签时iPhone默认layout viewport为980px，导致1vw=9.8px而非预期3.75px，换算公式为vw=(px×100)/设计稿宽度，需保留两位小数并避免maximum-scale等干扰初始化。
vw 能实现全机型自适应，但前提是 layout viewport 必须对齐设备物理宽度——否则所有计算都偏了。
为什么加了 vw 却在 iPhone 或微信里不缩放？
根本不是浏览器不支持 vw（Chrome 20+、Safari 6.1+、iOS Safari 6.1+ 全支持），而是 layout viewport 没被正确初始化。比如未加 时，iPhone 默认 layout viewport 宽度是 980px，此时 1vw = 9.8px，而你按设计稿 375px 算的 1vw ≈ 3.75px 就完全失效。
- 必须加
标签，且不能漏掉width=device-width和initial-scale=1.0 - 避免同时写
maximum-scale=1.0或user-scalable=no，它们可能阻断 layout viewport 的重置流程 - 微信 X5 内核早期版本有 bug：即使写了
viewport，首次渲染仍按 980px 计算vw，需用window.dispatchEvent(new Event('resize'))强制触发一次重算
怎么把设计稿的 px 值准确转成 vw？
换算公式固定：vw = (px × 100) / 设计稿宽度。假设设计稿是 750px 宽，那么 100px → (100 × 100) / 750 = 13.333vw。
- 小数位至少保留两位（
13.33vw），别四舍五入成13vw——在 375px 屏上差约 1.2px，文字或边框易模糊或错位 - 手算容易出错，推荐用 Sass 函数封装：
@function px2vw($px) { @return ($px / 750) * 100vw; } - PostCSS 插件如
postcss-px-to-viewport更稳妥，配置viewportWidth: 750即可自动转换
vw 布局中哪些地方最容易“翻车”？
vw 是刚性缩放，它不区分字体、边框、阴影，全部按视口等比缩放，这在实际项目中会暴露一堆细节问题。
-
font-size: 4vw在小屏上可能算出11.2px，但 iOS 会强制最小显示为12px，导致字号突变；得加min-font-size: 12px（仅 Safari 支持）或用媒体查询兜底 -
border: 0.02rem或border: 1px混用vw时，在 375px 屏上变成约0.8px，渲染虚、细、甚至不可见；建议统一用border: 1px solid #ccc并配合transform: scaleY(2)或box-shadow模拟 1px - iOS Safari 横屏切换时
vw更新有延迟，键盘弹出也会导致局部元素跳动；若对响应精度要求高，关键区域（如输入框、按钮）建议改用rem或媒体查询控制
真正难的不是写对 vw，而是判断哪里该用、哪里该收住——比如 banner 高度用 30vw 很自然，但按钮内边距如果也用 2vw，在 414px 屏和 320px 屏上体验就天差地别。边界感比公式更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
