vue 配置px 自动转化为rem
2019-04-01 本文已影响0人
一爷之秋
1安装postcss-pxtorem 插件
-
postcss-pxtorem
将像素单位转换为rem
。
npm install postcss-pxtorem --save-dev
在项目根目录下创建postcss.config.js文件
module.exports = {
plugins: {
'postcss-pxtorem': {
// px单位大写将忽略转化rem
rootValue: 100,
unitPrecision: 5,
propList: ['*'],
// propWhiteList 目前不知道是干啥的
// propWhiteList: [],
selectorBlackList: [/^html$/],
replace: true,
mediaQuery: false,
// minPixelValue: 2,
minPixelValue: 0,
},
},
};
创建rem.js文件
((doc, win) => {
const docEl = doc.documentElement;
const resizeEvt =
'orientationchange' in window ? 'orientationchange' : 'resize';
const recalc = () => {
let { clientWidth } = docEl;
if (!clientWidth) return;
if (clientWidth > 780) clientWidth = 780;
if (clientWidth < 310) clientWidth = 310;
// 以 iphone6/7 为基准
docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
在项目的main.js中引入该文件。