vue 配置 以及 postcss-pxtorem的使用

npm i postcss-pxtorem --save

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

module.exports = {
  plugins: {
    'postcss-pxtorem': {
       //根元素字体大小
       rootValue: 192, 设计稿宽度或者目前正常分辨率的1/10
       //匹配CSS中的属性，* 代表启用所有属性
       propList: ['*'],
       //转换成rem后保留的小数点位数
       unitPrecision: 5，
       //小于12px的样式不被替换成rem
       minPixelValue: 12,
       //selectorBlackList: ['.qz-'],// 要忽略的选择器并保留为px。
       //忽略一些文件，不进行转换，比如我想忽略 依赖的UI框架
       exclude: ['node_modules']
     }
  }
}

配置好重启项目 根据配置可知，我们是以font-size为基准实现页面尺寸布局的，但如果一直写死192，如何实现自适应布局？

为了达到在不同设备宽度下对应不同的基准值，还需新建rem.js，代码如下。
核心思想： 以设计稿定义的宽1920，根元素字体大小192为基准，动态计算不同屏幕下的不同根元素的字体大小。

 */
(function (win) {
  var dom = document.documentElement || document.body,
    fun = "orientationchange" in window ? "orientationchange" : "resize",  
    //上边这句的意思是判断是屏幕尺寸改变还是屏幕旋转。 (可以移动端适配)
    cb = function () {
      var clientWidth = dom.clientWidth < 800 ? 800 : dom.clientWidth; //这里限制pc端 最小800宽度
      /*移动端：
      var clientWidth = dom.clientWidth;
      clientWidth = clientWidth < 375 ? 375 : clientWidth;
      clientWidth = clientWidth > 750 ? 750 : clientWidth;
      */
     //移动端最小375宽度，最带750宽度
      dom.style.fontSize = clientWidth / 10 + "px";
    };
  cb();
  win.addEventListener(fun, cb, false);
})(window);

记得在main.js引入rem.js文件