rem适配原理

rem适配原理

rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位，也就是我们
前端常说的适配单位rem。因为rem的特性相对长度单位，常被用来做移动适配，pc端页面不推荐使用rem。

rem的移动适配原理：

在移动端的页面开发中，需要根据不同的手机去适配页面，让页面可以自适应的展示。
也就是说根据屏幕宽度的大小，改变元素和字体的大小，屏幕越宽元素和字体越大。
这个时候我们通常会用到rem作为单位
rem是css3中新增的一个单位，它是一个相对单位
rem用作非根元素的时候，是相对于根元素设定的字体大小,，用于根元素的时候，相对于初始字体的大小

rem是相对长度单位，可以做到一样的取值，在不同尺寸的屏幕上的大小按比例缩放。 **rem的定义：**rem（font size of the root element）是相对于根元素（即html元素）font-size计算值的倍数。 例如html标签设置font-size:16px，同时div设置width:1.2rem。那么这个div的宽度就是1.2rem=16px*1.2=19.2px。 因此这种方法的适配原理是：根据不同屏幕的宽度，以相同的比例动态修改html的font-size适配，并将px替换成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);