第三方ui库 rem适配

移动端使用rem适配，使用postcss-pxtorem可以将第三方ui库px转为rem

安装postcss-pxtorem

npm install postcss-pxtorem -D

在项目中配置参数

在vue.config.js中配置

         loaderOptions: {
            postcss:{
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 100,
                        propList: ["*"],
                        unitPrecision: 5,
                        // exclude:/(node_module)(fontIcon)/,                   
                    })
                ]
            }
        
        },

或者在根目录新建postcss.config.js文件

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 16,//结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
      propList: ['*']
    }
  }
}