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

发布日期： 2024-11-05 阅读量： 作者： 网络

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

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 计算字体大小导致页面变形，如何解决？的详细内容，更多请关注其它相关文章！

随便看看