适配手机端之 rem

Posted 2020-10-14 Lulin1

(function() {
        var psdWidth = 1080,
            maxRem = 100,
            ch = document.documentElement.clientHeight || document.body.clientHeight,
            cw = document.documentElement.clientWidth || document.body.clientWidth,
            pageWidth;

        var calcRem = function() {
            if (window.orientation && (window.orientation == 90 || window.orientation == -90)) {
                pageWidth = Math.max(ch, cw);
            } else {
                pageWidth = Math.min(ch, cw);
            }

            var rem = (pageWidth / psdWidth * 100).toFixed(2);
            rem = Math.min(rem, maxRem);
            window.rem = rem;
            document.getElementsByTagName(‘html‘)[0].style.fontSize = rem + ‘px‘;
        };

        calcRem();

        window["onorientationchange" in window ? "onorientationchange" : "onresize"] = calcRem;
    })();

　　

　　Eg. PSD中的width为378px,那么在手机端代码中为378/100=3.78rem.