vw单位生效的前提是正确设置viewport meta标签，否则ios safari会按默认980px layout viewport计算导致1vw=9.8px而非预期3.75px；设计稿750px时换算公式为vw=(px×100)/750，推荐用sass函数或postcss-px-to-viewport自动转换。
vw 能直接解决移动端适配，但前提是 viewport meta 标签必须正确设置，否则它根本不会按你预期工作。
为什么 vw 在 iPhone 或微信里不生效？
不是浏览器不支持 vw（Safari 6.1+、Chrome 20+、iOS Safari 全都支持），而是布局视口（layout viewport）没对齐设备真实宽度。比如 iPhone X 默认 layout viewport 宽度是 980px，此时 1vw = 9.8px，而你按设计稿 375px 算的应该是 ≈3.75px —— 差了 2.6 倍。
- 必须加
<meta name="viewport" content="width=device-width, initial-scale=1.0">，缺一不可 - 避免写
maximum-scale=1.0或user-scalable=no，它们会干扰 layout viewport 初始化，尤其在 iOS Safari 中可能锁死字体缩放 - 微信 X5 内核早期版本有 bug：未触发 layout viewport 重置时，
vw仍按 980px 计算；可加一句window.dispatchEvent(new Event('resize'))强制刷新，或用 JS 补偿
怎么把设计稿的 px 准确转成 vw？
换算本质是比例映射：vw = (px × 100) / 设计稿宽度。假设设计稿宽 750px，那么 100px → (100 × 100) / 750 = 13.333...vw，保留两位小数写成 13.33vw。
- 不要四舍五入到整数：
13vw和13.33vw在 375px 屏上相差约 1.2px，文字边缘或细边框易模糊或错位 - 手算容易出错，推荐用 Sass 函数封装：
@function px2vw($px) { @return ($px / 750) * 100vw; } - PostCSS 插件
postcss-px-to-viewport可自动转换，配置中viewportwidth: 750、unitprecision: 6、viewportunit: 'vw'是关键项
vw 和 rem 到底该选哪个？
vw 是纯 CSS 刚性缩放方案，所有使用 vw 的属性（font-size、border、box-shadow）都会随视口等比变化；rem 依赖根元素 font-size 动态设置，缩放节奏更可控。
-
vw下font-size: 4.27vw（按 750px 设计稿）在 414px 屏上变成 17.68px；而rem方案可通过媒体查询让字体在 ≥414px 后停在 18px 不再增长 -
vw对border: 1px同样缩放，小屏下可能缩成0.27vw ≈ 0.8px，渲染模糊——需配合min-width或媒体查询兜底 - iOS Safari 横屏切换时
vw偶尔延迟更新；rem因依赖 JS 重设根字号，反而响应更及时
真正麻烦的从来不是单位本身，而是忘了 layout viewport 是一切计算的起点——viewport meta 错了，后面所有 vw 值都是空中楼阁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
