webapp之rem布局

现在主流的webapp都开始使用rem布局,rem布局是一种相对布局，他与html的font-size成比例。

简单来说，如果html的font-size为10px,那么1 rem = 10px;如果html的font-size为20px,那么1 rem = 20px;

通常我们设置手机宽度都是以640px为标准,为了方便计算，通常都是设置html的font-size为100px，此时布局的时候1rem=100px。

下面是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>=640){
    
    docEl.style.fontSize = '100px';
  }else{
    
    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; } };

  if (!doc.addEventListener) return;
  
  win.addEventListener(resizeEvt, recalc, false);
  
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

简单来说，当屏幕的宽度大于640px的时候，设置html的font-size为100px，当小于640的时候，font-size与屏幕的宽度成比例缩小。

这样在任何页面中呈现的效果都比较相似。