vue-cli3.0 + lib-flexible + postcss-px2rem-exclude 实现pcrem自适应

916

vue-cli3.0 + lib-flexible + postcss-px2rem-exclude 实现pcrem自适应

1、安装lib-flexible

npm install lib-flexible
或者
yarn add lib-flexible

2、在vue项目的main.js中引入

import 'lib-flexible'

3、修改node_modules/lib-flexible/flexible.js 源码

  function refreshRem () {
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr < 1280) {
      width = 1280 * dpr;
    } else {
      width = width * dpr;
    }
    var rem = width / 24;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
  }

4 、安装postcss-px2rem-exclude

npm install postcss-px2rem-exclude -D
或者
yarn add postcss-px2rem-exclude -D

5、在项目根目录添加postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px2rem-exclude": {
      remUnit: 80,	// 这里是通过lib-flexible计算出来的html根节点的font-size值
      exclude: /node_modules|element-ui/i	//需要忽略的文件夹
    }
  }
}