移动端项目如何让rem计算不影响css样式的变形？

Question

我在nuxt移动端项目中，使用rem计算根节点字体大小，但是有一个问题：打开页面，浏览器运行到这段代码时，页面已经有内容在展示了；根节点字体大小赋值后，会让页面内容重绘，导致 页面在第一次打开的时候，会有css的扭曲变动，请问如何避免这样的情况发生？

Answer 1

把计算根节点字体那一段 JS 放到页面的最前面， head 里面

---

如果你了解过 flexible.js 的话，可以看到它的介绍里面就有。
1、内联这段 JS
2、放到在所有资源加载之前

参考：

• amfe/lib-flexible at master

Answer 2

设置初始字体大小样式： 在CSS中为根节点设置一个初始的字体大小，以避免在计算和设置REM单位之前出现明显的字体尺寸变化。这样可以确保页面在渲染初始内容时已经具有一致的字体大小。

使用媒体查询： 可以使用媒体查询来适配不同的屏幕大小。可以在不同屏幕尺寸下使用不同的根字体大小，避免在加载时发生明显的变化。

Answer 3

上面也有朋友提到了，先把rem代码放header里运行。

以前手头上生产项目都是这样处理的，先把页面内容隐藏起来，rem计算代码运行完毕后再显示页面。