h5手机端自适应解决方案

  现在手机端的项目比较多,自适应不用说那是必备技能了,目前应用的单位最多还是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);
 
上一篇:如何在Vue项目中使用vw实现移动端适配


下一篇:【webpack4x】postcss-loader无法自动添加浏览器前缀问题