vue3 vite postcss-pxtorem移动端适配

移动端适配是一个常见的问题，而使用postcss-pxtorem可以将px单位转换为rem单位，从而实现移动端适配。在Vue3中，可以使用Vite作为构建工具，同时使用postcss-pxtorem插件进行转换。具体配置可以在vite.config.js或vite.config.ts中进行，需要引入autoprefixer和postcss-pxtorem插件，并设置相应的参数，例如rootValue表示设计稿宽度除以10，propList表示需要转换的属性，selectorBlackList表示需要过滤的选择器。同时，如果使用了第三方UI库，需要设置exclude或selectorBlackList来忽略对其样式的转换。

相关问题

怎么用postcss-px2rem做移动端适配

PostCSS-px2rem是一个PostCSS插件，可以将CSS中的像素值转换为rem值，以实现移动端适配。

以下是使用步骤：

1. 安装`postcss-px2rem`插件

npm install postcss-px2rem --save-dev

2. 在项目根目录下创建`postcss.config.js`文件

module.exports = {
  plugins: {
    'postcss-px2rem': {
      remUnit: 75 // 设计稿宽度/10
    }
  }
}

其中，`remUnit`是设计稿宽度除以10的值，这个值可以根据实际情况进行调整。

3. 在`webpack.config.js`或`vue.config.js`中引入`postcss-loader`并加入配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                config: './postcss.config.js'
              }
            }
          }
        ]
      }
    ]
  }
}

4. 在CSS中使用像素值

.container {
  width: 750px; /* 设计稿宽度 */
  font-size: 28px; /* 除了长度单位外，其他样式仍然使用像素值 */
}

经过转换后，CSS将变为：

.container {
  width: 10rem;
  font-size: 0.37333333rem;
}

这样，就实现了移动端适配。当页面宽度发生变化时，rem值也会相应地进行调整，从而实现适配效果。

vite.config.ts如何适配postcss-pxtorem+amfe-flexible

要在vite.config.ts中适配postcss-pxtorem和amfe-flexible，需要进行如下配置：

1. 安装依赖

首先，需要安装postcss-pxtorem和amfe-flexible这两个库，可以使用npm或yarn进行安装：

npm install postcss-pxtorem amfe-flexible --save-dev

yarn add postcss-pxtorem amfe-flexible --dev

2. 配置vite.config.ts

在vite.config.ts中，需要添加一个postcss插件，并将amfe-flexible作为其参数传入，同时也需要配置postcss-pxtorem插件，代码如下：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import postcssPxToRem from 'postcss-pxtorem';

export default defineConfig({
  plugins: [
    vue(),
    {
      name: 'postcss',
      async transform(css, id) {
        if (id.endsWith('.vue') || id.endsWith('.css')) {
          const { default: postcss } = await import('postcss');
          const { default: flexible } = await import('amfe-flexible');
          const processor = postcss([postcssPxToRem({
            rootValue: 37.5,
            propList: ['*'],
          })]);
          const result = await processor.process(css, { from: id });
          return {
            code: result.css,
            map: result.map,
          };
        }
      },
      enforce: 'post',
    },
  ],
});

这里使用了vite的postcss插件，该插件可以通过调用postcss的API来处理CSS文件。在transform函数中，首先判断当前文件的类型是否为.vue或.css，然后使用postcss-pxtorem将px转换成rem，其中rootValue为根元素的字体大小，propList为要转换的属性列表，这里设置为所有属性都转换。

同时，将amfe-flexible作为postcss插件的参数传入，这样就可以自适应不同屏幕尺寸。

需要注意的是，由于postcss插件是异步执行的，因此需要使用async/await来等待插件执行完成后再返回结果。

以上就是在vite.config.ts中适配postcss-pxtorem和amfe-flexible的方法。