首页 > 文章列表 > 移动端项目中使用rem计算导致CSS变形,如何解决?

移动端项目中使用rem计算导致CSS变形,如何解决?

338 2024-11-10

移动端项目中使用rem计算导致CSS变形,如何解决?

移动端项目中rem计算导致css变形,如何解决?

在移动端项目中,使用rem计算根节点字体大小时,页面内容在展示时会发生重复重绘,引起css的扭曲变动。要避免此问题,可以将计算根节点字体大小的JS代码移动到页面的头部(head)元素中。

原因:

当页面加载时,浏览器会根据初始的根节点字体大小渲染页面内容。但当你使用rem计算根节点字体大小时,浏览器在一段时间后才确定实际的根节点字体大小。这会导致页面内容在不同的时间点被渲染,从而产生重绘和变形。

解决方案:

将计算根节点字体大小的JS代码放在页面的头部(head)元素中。这样,代码会在页面内容加载之前执行,并且浏览器会在渲染页面之前确定根节点字体大小。这将防止页面内容的重绘和变形。

参考:

amfe/lib-flexible at master

来源:1731125694