vue3移动端vh/vw适配核心是构建时自动转换px为视口单位，需配置viewport meta标签和postcss-px-to-viewport插件，开发仍写px，按设计稿宽度（如750）自动换算vw，字体、border、padding等全属性支持转换，无需运行时计算。
Vue 3 项目初始化时配置移动端 vh/vw 视口适配，核心是让开发仍写 px，构建时自动转为视口单位，并配合正确的视口 meta 设置。关键不在运行时计算，而在构建阶段转换 + 基础 HTML 约束。
1. 初始化项目后立即加 viewport meta 标签
在 public/index.html 的 中，确保有这行：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这是前提——没有它，vw/vh 会按错误的布局视口计算（比如在 iOS Safari 中可能按 980px 回退）。尤其注意 width=device-width 不可省略。
2. 安装并配置 postcss-px-to-viewport 插件
该插件是目前 Vue 3 + Vite 场景下最稳定、零运行时开销的方案。执行：
npm install postcss-px-to-viewport -D
然后在 vite.config.ts 的 css.postcss.plugins 中加入配置：
- viewportWidth 填设计稿宽度（如 750 或 375），必须与 UI 设计一致
-
unitToConvert 设为
'px'，表示只处理 px 单位 -
viewportUnit 和 fontViewportUnit 都设为
'vw'（字体也用 vw 更统一） -
propList 推荐
['*']，即所有 CSS 属性都参与转换（含border、padding等） -
mediaQuery 设为
true，否则 @media 里的 px 不会转 -
exclude 可填
/node_modules/或特定文件夹，避免误转第三方样式
3. 按设计稿基准写样式，不手动算 vw
假设设计稿是 750px 宽：
- 你写
width: 150px;→ 构建后变成width: 20vw;（因为 150 ÷ 750 × 100 = 20） - 你写
font-size: 32px;→ 变成font-size: 4.266667vw;（精度由unitPrecision控制） - 所有尺寸保持比例缩放，无需 JS 监听 resize 或动态改根字号
注意：图标、图片等非 CSS 尺寸需单独处理（如用 img { width: 100%; height: auto; } 或内联 SVG）。
4. 补充说明：何时用 vh？怎么控制最小/最大显示
vh 适合高度强相关场景，比如全屏背景、弹层遮罩、大屏标题行高：
- 全屏容器：
height: 100vh;（直接写，不依赖插件） - 固定头部高度（设计稿 100px，基于 750px）：
height: 13.333333vw;或更稳妥地用clamp()防过小：height: clamp(40px, 13.3333vw, 80px); - 避免内容被压缩过度：给 body 加
min-width: 320px;（对应最小支持设备）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
