rem布局加载闪烁问题

最新推荐文章于 2024-10-18 12:27:51 发布

前端向朔

最新推荐文章于 2024-10-18 12:27:51 发布

阅读量1w

点赞数 8

分类专栏：移动Web开发实战文章标签： rem布局加载闪烁开始很小媒体查询

本文链接：https://blog.csdn.net/u013778905/article/details/77938784

版权

rem布局在加载时可能出现元素初始显示过小并闪烁的问题。原因是CSS未加载时，html根元素的font-size未设置。解决方案包括：利用媒体查询预先设定html的font-size，或者在JavaScript中初始化设置。避免将媒体查询与JS混用，以减少冗余。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上体验地址：http://jiguang.qq.com/jiguang_app/kapian/html/card-query.html?from=singlemessage

扫描二维码：这里写图片描述

问题

翻到文章底部（反思1024），查看最新解决方案。

rem布局在加载的时候会出现元素一开始很小，闪烁一下恢复正常大小，这是怎么回事呢？为此，我们来探讨一下！

rem的布局具体不介绍了吧，你应该已经掌握或者会用了。

这里我的设计稿是750px的，以下是我用来动态设置html根元素font-size的代码，这里我设置了最大值100px哈！

!(function(doc, win) {
   
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
   
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if (clientWidth < 750) {
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            } else {
                docEl.style.fontSize = '100px';
            }
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);