vue 使用postcss-pxtorem 实现Pc端 或 移动端自适应zsl15492022-01-143,260阅读1分钟概念 ： postcss-pxtorem是PostCSS的插件，

要在Vue项目中使用postcss-pxtorem实现移动端或PC端的自适应，你需要按照以下步骤操作：

1. 安装postcss-pxtorem：

npm install postcss-pxtorem --save-dev

2. 在postcss的配置文件中（通常是postcss.config.js），添加postcss-pxtorem插件的配置：

module.exports = {
  plugins: {
    'autoprefixer': {},
    'postcss-pxtorem': {
      rootValue: 37.5, // 设计稿宽度的1/10，这里以375px设计稿为例
      propList: ['*'], // 需要转换的属性，这里选择转换所有属性
      selectorBlackList: ['weui', 'mu'], // 不进行转换的选择器
      replace: true, // 是否直接更换属性值，而不添加rem单位
      mediaQuery: false, // 是否在媒体查询中也进行转换
      minPixelValue: 0 // 设置最小的转换数值，小于此值的不转换
    }
  }
};

3. 确保你的Vue项目中的vue.config.js配置文件已经包含了对postcss的支持。如果没有，你可以这样配置：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 37.5, // 根据设计稿大小设置
            propList: ['*'],
            selectorBlackList: ['weui', 'mu'],
            replace: true,
            mediaQuery: false,
            minPixelValue: 0
          })
        ]
      }
    }
  }
};

完成以上步骤后，你的Vue项目将会自动使用postcss-pxtorem将CSS中的像素单位px转换成rem单位。在HTML和CSS文件中，你只需要按照设计稿的尺寸来编写样式，postcss-pxtorem会自动帮你转换成对应的rem单位。