移动端必备rem布局

在写移动端布局的时候，个人比较喜欢的一段代码。

(function(win){
    var docEl = win.document.documentElement;
    var timer = '';
    function changeRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width > 540)//最大宽度，若果兼容到ipad的话把这个去掉就行
        {
            width = 540;
        }
        var fontS = width/10;//把设备宽度10等分 等同于用vw来做
        docEl.style.fontSize = fontS + "px";
    }
    //页面尺寸发生改变的时候就再执行changeRem
    win.addEventListener("resize",function(){
        clearTimeout(timer);
        timer = setTimeout(changeRem,30);
    },false);
    //页面加载的时候，若果是调用缓存的话就再执行changeRem
    win.addEventListener("pageshow",function(e){
        if (e.persisted)//缓存
        {
            clearTimeout(timer);
            timer = setTimeout(changeRem,30);
        }
    },false);
    changeRem();
})(window)

简单解读下，浏览器默认字体大小16px=1rem,把浏览器宽度平均分为10份，如果设计稿是640*750，那么1rem=64px,宽度为100px的盒子就是，100/64rem。上面的注释比较清晰。