vue3自适应实现(postcss-pxtorem)

Vue 3的自适应实现可以通过使用postcss-pxtorem插件来实现。postcss-pxtorem是一个PostCSS插件，它可以将像素单位转换为rem单位，从而实现页面的自适应。

在Vue 3项目中使用postcss-pxtorem的步骤如下：

1. 首先，确保你的Vue项目已经安装了postcss和postcss-pxtorem插件。可以通过以下命令进行安装：

npm install postcss postcss-pxtorem --save-dev

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

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16, // 设计稿宽度除以10，例如设计稿宽度为375px，则rootValue为37.5
      propList: ['*'],
    },
  },
};

在上述配置中，rootValue表示根元素的字体大小，propList表示需要转换的属性列表，'*'表示所有属性都需要转换。

3. 在项目的webpack配置文件中引入postcss-loader，并将其添加到对应的loader配置中。例如，在vue.config.js文件中添加以下配置：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        config: {
          path: 'postcss.config.js',
        },
      },
    },
  },
};

4. 重新启动项目，此时postcss-pxtorem插件会自动将样式中的像素单位转换为rem单位，实现页面的自适应效果。