本文探讨了页面加载过程中，静态HTML与动态JS添加元素对字体大小的影响。在页面加载初期，由于js计算字体大小的代码执行较晚，导致瞬间字体放大。为解决此问题，建议将字体大小计算代码提前，并置于body标签头部，以避免视觉上的不连续。同时，文章提出了两种改进措施，包括在`refreshRem()`后添加字体设置代码和确保相关js在body头部加载，以确保正确计算并应用字体大小。
例如这样
然后这样
出现这样的原因一般是 静态的，即html里有一些静态的(即非js动态添加的)
如果在页面加载完成后，页面是用js动态添加的，这个问题就不太明显，
doc.addEventListener(‘DOMContentLoaded‘, function(e) {
doc.body.style.fontSize = 12 * dpr + ‘px‘;
}, false);
这段代码是起主要作用的，但是这段代码是在页面初始化完毕才执行的(即把把其他引用的js文件下载好，并且里面的函数都初始完成)，
这样，在页面加载的一瞬间，我们会看到页面先先放大的，不解释了，太晚了，直接说解决方案把。
refreshRem();
//doc.body.style.fontSize = 12 * dpr + ‘px‘;
flexible.dpr = win.dpr = dpr;
flexible.refreshRem = refreshRem;
1.在 refreshRem();后面加上doc.body.style.fontSize = 12 * dpr + ‘px‘;这段代码，
2.
把这两个js放在body的头部()，一定要放在这里，
不然 doc.body.style.fontSize = 12 * dpr + ‘px‘; 我们加的这段代码会报错，原因是可能是页面还没有body元素
最后ps一句：这个方案的原理就是在body刚加载完就计算fontsize，这样修改的会不会对其他方面就影响我还不太清楚，请懂得同学，告诉一下，谢谢
时间： 06-12
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
