rem原理

1、rem定义

rem是相对长度单位，相对于html元素(根元素)font-size计算值的倍数的css单位。

简单理解：1rem = html的font-size值（px）

eg:

html{
    font-size:10px;
}
div{
    font-size:1rem;//实际 1*10px=10px
}

2、适配原理

js设置   html标签的font-size   =  移动设备宽度/设计稿宽度 * 100 + "px"

具体：移动设备宽度/设计稿宽度  是渲染效果相对于设计稿的缩放比   ==》 *100   是为了把rem单位的font-size值放大100倍  （因为当font-size值小于浏览器支持的最小字体时，浏览器会把这个值按最小字体处理），为了方便计算，倍数一般为10或100

eg:

设计稿宽度700px，窗口宽度700px，倍数为100 ：

html { font-size:100px }    设盒子 width:1rem;（即100px）此时盒子占屏1/7  

若窗口宽度 350px ：

html {font-size:50px}  此时盒子宽度 1rem=50px   盒子占屏1/7    实现了移动端适配。

3、js实现

根据获取到的设备宽度，动态修改根元素的font-size值

var cw = document.documentElement.clientWidth; 
if (cw > 750) { 
    cw = 750; 
} 
document.getElementsByTagName("html")[0].style.fontSize = 100 * ( cw / 750) + 'px'

兼容性

(function(designWidth, maxWidth) {
    var doc = document,
        win = window;
    var docEl = doc.documentElement;
    var tid;
    var rootItem,rootStyle;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (!maxWidth) {
            maxWidth = 640;
        };
        if (width > maxWidth) {
            width = maxWidth;
        }
        var rem = width * 100 / designWidth;
        //兼容UC开始
        rootStyle="html{font-size:"+rem+'px !important}';
        rootItem = document.getElementById('rootsize') || document.createElement("style");
        if(!document.getElementById('rootsize')){
        document.getElementsByTagName("head")[0].appendChild(rootItem);
        rootItem.id='rootsize';
        }
        if(rootItem.styleSheet){
        rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)
        }else{
        try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}
        }
        //兼容UC结束
        docEl.style.fontSize = rem + "px";
    };
    refreshRem();

    win.addEventListener("resize", function() {
        clearTimeout(tid); //防止执行两次
        tid = setTimeout(refreshRem, 300);
    }, false);

    win.addEventListener("pageshow", function(e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
            doc.body.style.fontSize = "16px";
        }, false);
    }
})(750, 750);