第一步：
新建flexible.js文件
這里默認是10等份蛮穿，手動改為24庶骄，此時1rem=1920/24px即80px。（設(shè)計稿是1920px的）
這兒不是死的践磅，可以根據(jù)實際情況進行改動单刁。

(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() {
        // 這里默認是10等份，手動改為24府适，此時1rem=1920/24px即80px羔飞。（設(shè)計稿是1920px的）
        var rem = docEl.clientWidth / 24;
        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);

第二步：
使用cssrem這個插件進行px轉(zhuǎn)rem，要將文件大小改為相應(yīng)1920/24=80的等份檐春。也就是80px=1rem逻淌。

image.png

第三步：
頁面直接使用px再通過cssrem轉(zhuǎn)為rem即可，也可自己使用vh vw 和 彈性盒子進行布局疟暖，本方法并沒有采用媒體查詢來進行在不同屏幕下展示不同樣式卡儒，