【Vue】在vue项目中使用postcss-pxtorem+amfe-flexible完成移动端的rem适配

vue3项目中使用postcss-pxtorem+amfe-flexible完成移动端的rem适配

1. 安装postcss-pxtorem和amfe-flexible依赖

npm i postcss-pxtorem -S
//若报错就安装指定以下版本
npm install [email protected] -D

npm i amfe-flexible -S

2. 在vue.config.js或vite.config.js中引入插件和css配置

vue.config.js

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = {
    css:{
      sourceMap:false,
      loaderOptions: {
        postcss: {
          plugins: [
            autoprefixer(),
            pxtorem({
              rootValue: 37.5,
              propList: ['*']
            })
          ]
        }
      }
    }
}

vite.config.js

import { defineConfig } from 'vite'
import postCssPxToRem from 'postcss-pxtorem'

defineConfig({
    css: {
      // 配置 CSS modules 的行为。选项将被传递给 postcss-modules
      modules: {},
      // 内联的 PostCSS 配置（格式同 postcss.config.js）
      postcss: {
        plugins: [
          postCssPxToRem({
            rootValue: 37.5, // 1rem 的大小
            propList: ['*'], // 需要转换的属性，*(全部转换)
            unitPrecision: 6 // 转换精度，保留的小数位数
          })
        ]
      }
    }
 })

注意:
rootValue 75.0的值其实就是代表ui设计稿的750px的像素，引用的时候css直接写宽750px就相当于100％，它会自动根据屏幕进行计算成rem，无需对原测量值进行rem的换算（这里推荐37.5，结合2x的设计图开发，因为vant的组件你会发现37.5更为适合）。

3. 在main.js文件夹下引入import 'amfe-flexible';
4. 重启项目(直接安照UI设计稿750px写像素单位，开发更加高效,)