用vw简化h5布局的核心是px自动转vw，需配全viewport meta（width=device-width、initial-scale=1.0），通过postcss-px-to-viewport编译转换，并兼容老机型与横竖屏异常。
用 vw 单位简化 H5 布局开发，核心不是放弃 px，而是让 px 写法自动转为 vw，开发者无感、适配有保障。
先配对 viewport meta 标签
这是所有 vw 行为生效的底线。没它，1vw 可能对应几百像素，元素忽大忽小甚至消失。
必须写全这两项：
- width=device-width：让布局视口等于设备逻辑宽度（如 iPhone 14 Pro 是 393px）
- initial-scale=1.0：确保页面以 1:1 比例渲染，文字和间距不模糊、不压缩
别写 width=375 或省略 initial-scale，否则在不同机型上会错乱。
构建层自动转 px → vw
手动算 calc(20 / 375 * 100vw) 不现实。推荐用工具在编译时统一处理，例如 Vite 项目中接入 postcss-px-to-viewport：
- 设
viewportWidth: 375（严格对齐设计稿宽度，750 稿则填 750） - 设
viewportUnit: 'vw'，单位精度保留 5 位小数够用 - 用
selectorBlackList跳过第三方组件类（如.van-button），避免样式污染 -
exclude: /node_modules/防止把 UI 库样式也转了
写 .btn { width: 100px; height: 44px; }，编译后自动变成 width: 26.66667vw; height: 11.73333vw;，无需改习惯。
兜住老机型和横竖屏异常
vw/vh 在 iOS 8–9、部分安卓 4.x WebView 中存在字体模糊、布局抖动等问题，需主动兼容：
- 加
postcss-viewport-units插件，自动生成-webkit-viewport-unit前缀 - 关键文字或按钮可加降级：
@supports not (width: 1vw) { .title { font-size: 16px; } } - 横屏时纯
5vw字体会暴涨，改用4vmin更稳——竖屏按宽算，横屏按高算，视觉大小基本一致 - 需要精细控字号时，可全局设
html { font-size: calc(100vw / 375); }，再配合 rem 使用
避开常见坑：滚动条、地址栏、父容器限制
100vw 不等于“铺满屏幕”，它包含滚动条宽度；100vh 在 iOS Safari 地址栏收起时不重算，容易留白或遮挡。
- 内容区别用
width: 100vw，优先选width: 100%或flex: 1 - 全屏遮罩、背景图可用
width: 100vw; height: 100vh;，它是安全的 - 要真正响应地址栏显隐，现代方案用
height: 100dvh（iOS Safari 16.4+、Chrome 105+ 支持） - 高度计算慎用
calc(100vh - 60px)，记得加min-height: 0防 flex item 收缩异常
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
