大家在写手机站的时候经常会用到rem进行网页布局，那么你们在使用的过程中是否出现了刷新页面会有闪烁的问题呢？

　　下面为大家简单的介绍下rem

　　移动端使用rem布局js代码

　　REM是相对单位，是相对于HTML根元素。

　　这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

　　目前，除了IE8及更早版本外，所有浏览器均已支持rem。

　　rem.js适配计算代码

window.onload = function(){
  /*750代表设计稿的宽度，设计稿是多少，就写多少;100代表换算比例*/
  getRem(750,100)
};
window.onresize = function(){
  getRem(750,100)
};
function getRem(pwidth,prem){
  var html = document.getElementsByTagName("html")[0];
  var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
  html.style.fontSize = oWidth/pwidth*prem + "px";
}

　　rem.js 适配计算代码

// 移动端rem适配所有手机
(function(doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      if (clientWidth >= 750) {
        docEl.style.fontSize = '100px';
      } else {
        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
      }
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

　　CSS解决 rem.js 响应 闪烁 问题代码

　　由于字体大小都是基于html的，所以在移动端做适配的时候，可以使用这样的方法，提前设置好预设设配，避免js未及时响应

@media (min-width: 320px){html{font-size: 42.6667px;} }
@media (min-width: 360px){html{font-size: 48px;} }
@media (min-width: 375px){html{font-size: 50px;} }
@media (min-width: 384px){html{font-size: 51.2px;} }
@media (min-width: 414px){html{font-size: 55.2px;} }
@media (min-width: 448px){html{font-size: 59.7333px;} }
@media (min-width: 480px){html{font-size: 48px;} }
@media (min-width: 512px){html{font-size: 68.2667px;} }
@media (min-width: 544px){html{font-size: 72.5333px;} }
@media (min-width: 576px){html{font-size: 76.8px;} }
@media (min-width: 608px){html{font-size: 81.0667px;} }
@media (min-width: 640px){html{font-size: 85.3333px;}

筱航科技主营业务： 长春网站建设 - 长春网站制作 -长春网站设计 -长春网站开发 -长春网站优化 -长春网站SEO - 长春网站推广 - 长春网络营销 - 长春网站关键词排名 -长春微信小程序 -长春微信商城 -长春分销商城