首页 > 文章列表 > 如何避免使用rem计算造成页面变形?

如何避免使用rem计算造成页面变形?

149 2025-01-27

如何避免使用rem计算造成页面变形?

避免rem计算造成页面变形

在使用rem计算根节点字体大小时,可能会遇到页面在第一次打开时出现css扭曲变动的现象。这是因为在浏览器运行到计算根节点字体大小的代码时,页面内容已经开始展示,随后根节点字体大小的赋值操作会导致页面内容重绘,从而产生变形效果。

要避免这种情况,可以在页面的最前面,也就是head标签内,放置计算根节点字体大小的JS代码。这样,该代码会在所有资源加载之前运行,避免根节点字体大小的赋值操作影响到已经展示的页面内容。

参考:

  • amfe/lib-flexible
来源:1730761596