Vue3 大屏项目适配方案：px2rem 插件实战

一、为什么选择 px2rem？

• 简单易用：  px2rem 可以将 px 单位自动转换为 rem 单位，无需手动计算，简化开发流程。
• 灵活可控：  可以根据设计稿尺寸和屏幕宽度动态调整根元素字体大小，实现精准适配。
• 兼容性好：  支持 Vue3 和主流浏览器，无需担心兼容性问题。

二、实现步骤

1. 安装依赖

npm install postcss-px2rem --save-dev

2. 配置 postcss.config.js

在项目根目录下创建 postcss.config.js 文件，并添加以下配置：

module.exports = {
  plugins: {
    'postcss-px2rem': {
      remUnit: 192, // 设计稿宽度 / 10，例如设计稿宽度为 1920px，则 remUnit 为 192
      propList: ['*'], // 需要转换的属性，默认全部转换
      exclude: /(node_module)/, // 排除 node_module 目录下的文件
    },
  },
};

3. 动态设置根元素字体大小

在 main.js 文件中添加以下代码：

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 动态设置根元素字体大小
function setRem() {
  const docEl = document.documentElement;
  const clientWidth = docEl.clientWidth;
  if (!clientWidth) return;
  docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px'; // 1920 为设计稿宽度
}

setRem();
window.addEventListener('resize', setRem);

app.mount('#app');

4. 使用 px 单位进行开发

在项目中使用 px 单位进行开发，px2rem 会自动将其转换为 rem 单位。

<template>
  <div class="container">
    <h1>这是一个标题</h1>
    <p>这是一段文字</p>
  </div>
</template>

<style scoped>
.container {
  width: 1200px;
  margin: 0 auto;
}

h1 {
  font-size: 36px;
}

p {
  font-size: 16px;
}
</style>

三、注意事项

• 设计稿尺寸：  需要根据设计稿尺寸设置 remUnit 和 setRem 函数中的设计稿宽度。
• 字体大小：  建议使用 rem 单位设置字体大小，避免字体缩放导致页面布局错乱。
• 图片适配：  可以使用 object-fit 属性或 background-size 属性实现图片的适配。

四、总结

使用 px2rem 插件可以方便快捷地实现 Vue3 大屏项目的适配。通过动态设置根元素字体大小，可以实现页面元素根据屏幕宽度自动缩放，达到最佳的显示效果。