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 //需要忽略的文件夹
}
}
}