Vue3 布局适配愁哭了？用这招让 px 自动转 vw，适配所有屏幕

原创已于 2025-12-18 10:24:33 修改 · 1.3k 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#vue3 #rem #弹性布局

于 2025-12-15 19:15:00 首次发布

前端工程化专栏收录该内容

12 篇文章

订阅专栏

在 Vue 3 项目中将 px 布局改为弹性布局（响应式/自适应），核心目标是让页面在不同屏幕分辨率下都能良好显示。以下是系统性、可落地的解决方案：

一、理解“弹性布局”的几种常见实现方式

方案说明适用场景

rem + 动态根字体通过 JS 动态设置 html 的 font-size，所有尺寸用 rem 兼容性好适合复杂项目
vw/vh 视口单位直接使用 vw/vh 替代 px 简单高效，现代浏览器支持好
CSS Grid / Flexbox 响应式使用弹性盒或网格布局 + 媒体查询结构自适应，非尺寸缩放
postcss-px-to-viewport 插件自动将 px 转为 vw（推荐！）开发仍写 px，构建自动转换

💡 推荐组合：postcss-px-to-viewport + Flex/Grid 布局

二、推荐方案：使用 postcss-px-to-viewport（最省心）

步骤 1：安装插件

npm install -D postcss-px-to-viewport

步骤 2：配置 PostCSS（Vite 项目）

在项目根目录创建或修改 postcss.config.js：

// postcss.config.js
module.exports = {
plugins: {
'postcss-px-to-viewport': {
unitToConvert: 'px', // 要转换的单位
viewportWidth: 1920, // 设计稿宽度（如 Figma/Sketch 宽度）
unitPrecision: 6, // 小数位数
propList: [''], // 哪些属性需要转换（ 表示全部）
viewportUnit: 'vw', // 转换后的单位
fontViewportUnit: 'vw',
selectorBlackList: [], // 忽略的选择器（如 ['.ignore']）
minPixelValue: 1, // 小于 1px 不转换
mediaQuery: false, // 是否在媒体查询中也转换
replace: true,
exclude: [], // 排除某些文件（如 /node_modules/）
landscape: false,
landscapeUnit: 'vw',
landscapeWidth: 1920
}
}
}

📌 关键参数：
viewportWidth: 你的设计稿宽度（常见 1920、1440、750）
如果是移动端 H5，通常设为 375 或 750；如果是 PC 端大屏，设为 1920。

步骤 3：开发时仍写 px

<template>
<div class="card">Hello</div>
</template>

<style scoped>
.card {
width: 200px; / 构建后自动变成 vw /
height: 100px;
font-size: 16px;
margin: 20px;
}
</style>

构建后会自动转为：

.card {
width: 10.416667vw;
height: 5.208333vw;
font-size: 0.833333vw;
margin: 1.041667vw;
}

✅ 实现了等比缩放，适配任意分辨率！

三、补充：结合 Flex/Grid 实现结构自适应

即使尺寸用了 vw，布局结构也建议用弹性布局：

<template>
<div class="container">
<div class="sidebar">侧边栏</div>
<div class="main">主内容区</div>
</div>
</template>

<style scoped>
.container {
display: flex;
height: 100vh;
}
.sidebar {
width: 240px; / 会被转为 vw /
background: #f0f0f0;
}
.main {
flex: 1; / 自动填充剩余空间 /
padding: 20px;
}
</style>

这样既保证了尺寸缩放，又保证了布局弹性。

四、其他注意事项

1、防止文字过小（PC 端）

vw 在超大屏上会让文字过大，超小屏上过小。可加最小/最大限制：

body {
font-size: clamp(14px, 0.73vw, 18px); / 最小14px，最大18px /
}

2、忽略某些 px 不转换

比如边框 1px 想保持物理像素：

// postcss.config.js
selectorBlackList: ['.no-vw'],
minPixelValue: 2 // 小于2px不转

然后：

.border-1px {
border: 1px solid #ccc; / 不会被转换 /
}

或使用注释：

/ no /
border: 1px solid red; / 插件会跳过带 "no" 注释的行 /

3、移动端 vs PC 端

移动端 H5：设计稿通常 375px 或 750px，viewportWidth: 375
PC 大屏：设计稿 1920px，viewportWidth: 1920

4、全局配置不需要转换的属性

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 1920,
      unitPrecision: 6,
      viewportUnit: 'vw',
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      // 👇 显式启用注释（其实默认就是 true）
      exclude: [/node_modules/], // 这个是排除文件夹，不是注释
      // 用 propList 排除字体属性
      propList: [
		  '*',
		  '!font*',
		  '!letter-spacing',
		  '!line-height'
		 ]
    }
  }
}

五、替代方案：rem + 动态设置 fontSize

如果你不想用 vw，也可以用 rem：

// main.js 或 layout 组件中
function setRem() {
const baseSize = 1920 // 设计稿宽度
const scale = document.documentElement.clientWidth / baseSize
document.documentElement.style.fontSize = 100 scale + 'px' // 1rem = 100px scale
}
setRem()
window.addEventListener('resize', setRem)

然后所有尺寸写成 rem（如 width: 2rem 表示 200px @1920px 屏幕）。

但相比 vw，rem 需要 JS 干预，且不如 vw 简洁。

六、总结：最佳实践

步骤操作

1️⃣ 安装 postcss-px-to-viewport
2️⃣ 配置 postcss.config.js，设置 viewportWidth 为设计稿宽度
3️⃣ 开发时继续写 px，构建自动转 vw
4️⃣ 布局结构使用 flex / grid 实现自适应
5️⃣ 对 1px 边框等特殊需求，用 minPixelValue 或 selectorBlackList 排除

这样，你的 Vue 3 项目就能轻松实现分辨率自适应，一套代码适配从 1366x768 到 4K 大屏！

七、踩坑注意事项

postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide: https://evilmartians.com/chronicles/postcss-8-plugin-migration

报这个错，是因为你没安装最新的,要安装最新版

npm install -D postcss-px-to-viewport@latest

postcss.config.js

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px',
      viewportWidth: 1920,        // 根据你的设计稿宽度设置（PC常用1920）
      unitPrecision: 6,
      propList: ['*'],
      viewportUnit: 'vw',
      fontViewportUnit: 'vw',
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: [],
      landscape: false,
      landscapeUnit: 'vw',
      landscapeWidth: 1920
    }
  }
}