移动端页面自适应大小

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_18826911/article/details/71547129

(function (doc, win) {
    // 分辨率Resolution适配
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
    };
    // Abort if browser does not support addEventListener
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);

    })(document, window);

可以通过设置html{font-size: 100px;}，将所有px设置的大小转换成rem实现自适应大小。
不过这段代码会导致进入页面会先抖动一下适应屏幕大小，我是先隐藏页面元素等运行完这段代码再显示出来从而不再出现抖动。

有更好的实现方式求告知！