现在手机端的项目比较多,自适应不用说那是必备技能了,目前应用的单位最多还是rem,
然而每次在制作过程中需要自己计算rem值比较繁琐,现在分享下postcss-pxtorem的使用可以把px直接转换为rem,省下了计算的体力了
首先安装依赖
npm install postcss-pxtorem -D
其次设置规则
在package.json里面配置下,配置如下
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": "72",//设计稿十比一比例换算 ,我这里得设计稿720
"propList": [ //可以设置全部属性转换为rem propList ['*']
"padding", .....
]
}
}
},
最后配合flexrem.js使用就解决了移动端适配问题
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', //改变窗口大小 重新设置rem
recalc = function() {
var clientWidth = docEl.clientWidth;
if(clientWidth > 750){//屏幕最大尺寸不超过750
clientWidth = 750
}
if (!clientWidth) return;
docEl.style.fontSize = (clientWidth / 10) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);