移动端使用rem布局时切换页面的时候字体瞬间变大后恢复正常 / CSS

8月前 阅读 / 557 来源 / 原创 文 / 管理员

在我们使用rem布局的时候,在切换页面加载新页面的时候,字体会变大后自动变成正常大小。1、我们需要在 body 或者html 加个visibility:h...

在我们使用rem布局的时候,在切换页面加载新页面的时候,字体会变大后自动变成正常大小。

1、我们需要在 body 或者html 加个visibility:hidden;  或者用opacity:0;

<body style="visibility: hidden;"></body>

2、使用rem加载完成后的函数调用 body属性的visbility:visible;

(function(doc, win) {
    var docE1 = doc.documentElement,
    bodys = document.getElementsByTagName('body')[0],
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docE1.clientWidth;
            if (!clientWidth) return;
            docE1.style.fontSize = 100 * (clientWidth / 750) + 'px';
            bodys.style.visibility = 'visible'
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);


2

评论列表
共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~