postcss-pxtorem适配，px自动转换成rem 任意宽度设计稿都适用

步骤一：

npm i lib-flexible --save
npm install postcss-pxtorem -D

步骤二：

在项目根目录下创建postcss.config.js配置文件

module.exports = {
  plugins: {
    // 兼容浏览器，添加前缀
    autoprefixer: {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        "last 10 versions", // 所有主流浏览器最近10版本用
      ],
      grid: true,
    },
    "postcss-pxtorem": {
      rootValue: 37.5, //此值为根标签的fontSize的值，计算方式为【**设计稿宽度/10**】. 结果为：设计稿元素尺寸/37.5，比如元素宽375px,最终页面会换算成 10rem
      propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']
      unitPrecision: 5, //保留rem小数点多少位
      //selectorBlackList: ['.radius'],  //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
      replace: true, //这个真不知到干嘛用的。有知道的告诉我一下
      mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
      minPixelValue: 12, //px小于12的不会被转换
    },
  },
};

步骤三：

在main.js中引入模块

import 'lib-flexible'

如上，就可以在项目中直接写设计稿上测量出的宽高了，比如设计稿上量出宽为130px，我们就直接在项目中写130px，插件会自动帮我们把它换算成正确的rem。

如果是非手机端项目，设计稿不是375或750等手机常规宽度时，比如设计稿为1444px，按上述方法配置出来效果会不符合预期，那是因为lib-flexible插件设置根标签的fontSize时有个最大限制，源代码如下：
可将postcss.config.js配置中rootValue设为:54,或自己写个rem.js并在main.js中引入，相应的，main.js中就不需要引入lib-flexible了。

rem.js文件

(function() {
  const baseSize = 16; // 32
  function setRem() {
  	/*
  		scale = document.documentElement.clientWidth /设计稿宽度,
  		我的设计稿的宽度是1444px
  	*/
    const scale = document.documentElement.clientWidth / 1444; // 750
    document.documentElement.style.fontSize =
      baseSize * Math.min(scale, 2) + "px";
  }
  setRem()
  window.onresize = function() {
    setRem();
  };
})();

postcss.config.js文件中的rootValue就是rem.js中 baseSize的值。
我这个rem.js文件写得比较简单，仅供参考