rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

PostCss

官方话术：是一个用JavaScript工具和插件转换CSS代码的工具。

声明：它不是 “ 预处理器 ”，因它没有像使用预处理那些功能，且能和预处理器结合使用；它也不是一个真正的 “ 后处理器 ”。因后处理器通常被视为在完成的样式表中根据CSS规范处理CSS，常做的是CSS属性添加浏览器私有前缀，但PostCSS并不局限于此。所以，最好的解释，它是个处理器（平台），拥有多样化的功能插件，可根据自己的需要配置需要的功能，甚至你自己都可编写PostCSS插件。

常用的插件有autoprefixer添加浏览器私有前缀，px自动化转rem需要什么插件？ 答案是postcss-pxtorem。

postcss-pxtorem

安装

npm i postcss-pxtorem --save

项目下新建postcss.config.js文件

module.exports = {
  plugins: {
    'postcss-pxtorem': {
       //根元素字体大小
       rootValue: 16,
       //匹配CSS中的属性，* 代表启用所有属性
       propList: ['*'],
       //转换成rem后保留的小数点位数
       unitPrecision: 5，
       //小于12px的样式不被替换成rem
       minPixelValue: 12,
       //忽略一些文件，不进行转换，比如我想忽略 依赖的UI框架
       exclude: ['node_modules']
     }
  }
}

添加完毕，尝试重启下项目，使文件生效~

重启后，打开Chrome控制台，可以发现所有的px都被自动转化为rem。

也可以根据不同屏幕宽度进行等比缩放，新建rem.js文件，在main.js引用

const baseSize = 16
function setRem() {
  const scale = document.documentElement.clientWidth / 1920
  document.documentElement.style.fontSize = baseSize * scale + 'px'
}
setRem()
window.onresize = function () {
  setRem()
}