vue-cli3 配置 postcss-pxtorem

1.首先安装依赖 （已配置postcss）

yarn add 或者 npm  install postcss-pxtorem
 

2.更改package.json

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-cssnext": {},
      "postcss-pxtorem": {
        "rootValue": 16,
        "propList": [
          "*"
        ]
      }
    }
  },

3.新建一个文件 比如  ./src/assets/rem.js

// 设置 rem 函数
function setRem () {
  // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
  let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
  let htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体大小
  htmlDom.style.fontSize= htmlWidth/20 + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

4.在main.js引入 import './assets/rem.js'

5. 直接写px，它会自动帮你转成rem，rem.js是为了让整个页面缩放的时候整体改变