REM布局-自动计算根fontsize

/* 根据窗口宽度自动计算html基准字体大小,用于移动端弹性布局 */
(function() {
    var docEl = document.documentElement,
        docBody = document.body,
        baseFontSize = 100,//为了方便,这样rem=px/100
        pageMaxWidth = 750,
        rootHtml = document.getElementsByTagName('html')[0],
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = clientWidth = docEl.clientWidth || docBody.clientWidht;

            //最大宽度显示为750的宽度
            if (clientWidth > pageMaxWidth) {
                clientWidth = pageMaxWidth
            }

            if (!clientWidth) return;
            rootHtml.style.fontSize = baseFontSize * (clientWidth / pageMaxWidth) + 'px';
        };
    if (!window.addEventListener) return;

    window.addEventListener(resizeEvt, recalc, false);

    recalc();
})();
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容