vue 移动端适配pxtorem

第一步

先安装

cnpm install --save lib-flexible/flexible.js
cnpm install postcss-pxtorem@5.1.1 -D 
npm install postcss postcss-loader -D

第二部

main.js引入

import "lib-flexible/flexible.js";

第三部

配置
方法一
新建postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {
      // 添加浏览器前缀
      // browsers: ["Android >= 4.0", "iOS >= 7"]
    },
    "postcss-pxtorem": {
      rootValue: 37.5, //结果为：设计稿元素尺寸/75，设计稿宽 750,最终页面会换算成 10rem      // unitPrecision: 5, // 允许REM单位增长的十进制数      propList: ["*"],      // selectorBlackList: [""], //（数组）要忽略的选择器并保留为px。      minPixelValue: 2 // （数字）设置要替换的最小像素值 解决 1px 问题 
      selectorBlackList: [".van"],
      prpList: ["*"],
      minPixelValue: 2,
    }
  }
}

方法二
在vue.config.js

css: {
    loaderOptions: {
      postcss: {
        plugins: [
          // 把px单位换算成rem单位
          require("postcss-pxtorem")({
            rootValue: 37.5, // 换算的基数(设计图750的根字体为32)
            selectorBlackList: [".van"], // 要忽略的选择器并保留为px。
            propList: ["*"], //可以从px更改为rem的属性。
            minPixelValue: 2 // 设置要替换的最小像素值。
          })
        ]
      }
    }
  }