动态设置rem

rem适配原理

原理：是相对于根元素的font-size计算值的倍数

计算方式：屏幕宽度/设计稿宽度基本宽度=fontsize*

使用：通过rem+js改变根元素font-size来实现兼容性更高的页面

使用JavaScript来动态修改根元素的大小，其他的rem单位会被浏览器转换成px。
本质：等比缩放，一般给予宽度

缺点：在响应式布局中，必须通过js动态控制字体大小，css和js代码有一定的耦合性，将必须改变字体的代码放在css之前。

最简单的rem配置

function rem(){
     
        document.documentElement.style.fontSize=document.documentElement.clientWidth / 7.5 + 'px';
    }
    rem();
    window.onresize = rem;

具体的动态设置rem

动态配置rem其实就是在窗口大小改变时重新设置rem的值

(function(doc, win) {
     
    var docEl = doc.documentElement,
        resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
        recalc = function() {
     
            if (docEl.clientWidth > 750) {
     
                docEl.style.fontSize = "100px";
                doc.getElementById("app").style.width = "750px";
            } else {
     
                var width = docEl.clientWidth / 7.5;
                docEl.style.fontSize = width + "px";
                doc.getElementById("app").style.width = "auto";
            }
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);