如何配置rem页面自适应 flexible.js VsCode cssrem插件实现px转rem

flexible.js 默认把页面分成10等份。

假设：设计图是750px的规格大小 那么1rem=75px(750/10)。
如果、恰巧、刚好，有人在pc打开怎么办，好家伙那字体大的还不得起飞。所有我们加个判断，过于大时让它两边留白：

   var clientWidth = docEl.clientWidth
        if (clientWidth > 1200) {
            clientWidth = 1200;
        }

flexible.js代码(将代码复制到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() {
        //当屏幕大于1200时，设置为1200,也就时最大不能超过1200，根据需求自己设定大小
        var clientWidth = docEl.clientWidth

        if (clientWidth > 1200) {

            clientWidth = 1200;
        }
        //将屏幕分成10等份 750px的界面1rem=75px

        var rem = 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);

通过计算来定义页面元素rem的大小，VSCode可以下载cssrem插件自动帮你计算。需要点击Extension Settings 设置 Cssrem:Root Font Size 参数将其设置为算好的75px，cssrem.fixedDigits px转rem小数点最大长度，默认：6。

image

image