Nuxt 移动端项目使用 rem 计算字体大小导致页面变形，如何解决？

从现在开始，努力学习吧！本文《Nuxt 移动端项目使用 rem 计算字体大小导致页面变形，如何解决？》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

rem 计算导致移动端页面变形的解决方法

在 nuxt 移动端项目中使用 rem 计算根节点字体大小时，页面会发生内容重绘，导致页面打开时出现样式变形。如何避免这种现象？

解决方案：

移动根节点字体大小计算代码到页面顶部，即 head 中。

原理：

flexível.js 也遇到了类似问题，它的解决办法是将计算代码内联到 HTML 中并将其放在所有资源加载之前。这样做可以确保在页面内容渲染之前应用 rem 计算，从而避免变形。

参考：

• [amfe/lib-flexible at master](https://github.com/amfe/lib-flexible/blob/master/README.md)

理论要掌握，实操不能落！以上关于《Nuxt 移动端项目使用 rem 计算字体大小导致页面变形，如何解决？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！