vue-@vue/cli3.0 使用 postcss-pxtorem

简述

postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。 前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值，为了能够直接按照设计图的尺寸开发，并且能自动编译转换成rem，下面就来分享下postcss-pxtorem的使用

（1）安装依赖

npm install postcss-pxtorem --save-dev

（2）配置（vue.config.js）

  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 50, 
            propList: ['*'],
          }),
        ]
      }
    }
  }
  // rootValue: 换算的基数，例如：设置div高度 100px =》 1rem
  // 忽略转换正则匹配项。插件会转化所有的样式的px。比如引入了三方UI，也会被转化。
  // 目前我使用selectorBlackList字段，来过滤
  // 如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。
  // selectorBlackList  : ['weui','mu'],

（3）引入rem.js

// main.js 中引入rem.js

import '@/rem';

// rem.js 具体代码
!function (e, t) {
  function i() {
    o = 1, e.devicePixelRatioValue = o, s = 1 / o;
    var t = a.createElement("meta");
    if (t.setAttribute("name", "viewport"), t.setAttribute("content", "initial-scale=" + s + ", maximum-scale=" + s + ", minimum-scale=" + s + ", user-scalable=no"), d.firstElementChild) d.firstElementChild.appendChild(t);
    else {
      var i = a.createElement("div");
      i.appendChild(t), a.write(i.innerHTML)
    }
  }

  function n() {
    var e = Math.min(d.getBoundingClientRect().width, 1024);
    r = 100 * e / t.desinWidth, d.style.fontSize = r + "px"
  }

  var a = e.document, d = a.documentElement, o = (e.devicePixelRatio, 1), s = 1;
  i();
  var l, r = 100;
  t.desinWidth = 640, t.baseFont = 18, t.init = function () {
    e.addEventListener("resize", function () {
      clearTimeout(l), l = setTimeout(n, 300)
    }, !1), e.addEventListener("pageshow", function (e) {
      e.persisted && (clearTimeout(l), l = setTimeout(n, 300))
    }, !1), "complete" === a.readyState ? a.body.style.fontSize = t.baseFont * o + "px" : a.addEventListener("DOMContentLoaded", function () {
      a.body.style.fontSize = t.baseFont * o + "px"
    }, !1), n(), d.setAttribute("data-dpr", o)
  }
}(window, window.adaptive || (window.adaptive = {}));
window['adaptive'].desinWidth = 750;//375px
window['adaptive'].baseFont = 18;
window['adaptive'].init();

更多关于postcss的使用可以参考（个人觉得这个博文写的很好） www.jianshu.com/p/288963680…