rem 移动端自适应

一、方式一

rem单位是相对于根元素的字体大小来计算的；当使用rem单位设置元素的尺寸或字体大小的时候，会基于根元素的字体大小进行计算；

rem单位不会继承父级字体大小，始终相对于根元素字体大小

如果根元素字体大小为16px,设置一个元素为2rem，那么元素的宽度是32px;

通过js，根据窗口大小以及跟元素大小（这里设置100px）动态计算rem值；如果设计稿（750px）元素高100px,那么可设置height:1rem;

(function(){
    var calc = function(){
        var docElement = document.documentElement;
        // 根据屏幕宽度计算并设置根元素的字体大小 设计稿宽度为750px
        var clientWidthValue = docElement.clientWidth > 750 ? 750 : docElement.clientWidth;
        //根节点大小为100px
        docElement.style.fontSize = 100*(clientWidthValue/750) + 'px';
    };
    calc();
    window.addEventListener('resize',calc);
})();

二、方式二（flexible.js）

2.1 引入flexible.js,

2.1.1cdn引入

<script src="js/flexible.js"></script>

设计稿是750px,flexible.js 把屏幕分为 10 等份,2. cssrem 插件的基准值是 75px

function setRemUnit() { 
    var rem = docEl.clientWidth / 10; 
    docEl.style.fontSize = rem + "px"; 
}

2.2 安装转化工具

2.1.2npm 引入

npm i -S lib-flexible

在node_modules中找到lib-flexiable/flexible.js

2.3 flexible.js

(function flexible(window, document) {
    var docEl = document.documentElement;
    var dpr = window.devicePixelRatio || 1;

    // adjust body font size
    function setBodyFontSize() {
        if (document.body) {
            document.body.style.fontSize = 12 * dpr + "px";
        } else {
            document.addEventListener("DOMContentLoaded", setBodyFontSize);
        }
    }
    setBodyFontSize();

    // set 1rem = viewWidth / 10
    function setRemUnit() {
        var rem = docEl.clientWidth / 10;
        docEl.style.fontSize = rem + "px";
    }

    setRemUnit();

    // reset rem unit on page resize
    window.addEventListener("resize", setRemUnit);
    window.addEventListener("pageshow", function (e) {
        if (e.persisted) {
            setRemUnit();
        }
    });

    // detect 0.5px supports
    if (dpr >= 2) {
        var fakeBody = document.createElement("body");
        var testElement = document.createElement("div");
        testElement.style.border = ".5px solid transparent";
        fakeBody.appendChild(testElement);
        docEl.appendChild(fakeBody);
        if (testElement.offsetHeight === 1) {
            docEl.classList.add("hairlines");
        }
        docEl.removeChild(fakeBody);
    }
})(window, document);