移动端项目中消除rem字体大小计算带来的css扭曲
在移动端项目中，使用rem计算根节点字体大小可以实现自适应布局。但是，此方法可能会导致页面打开时出现css扭曲，这是因为页面内容在根节点字体大小赋值后重新渲染造成的。
解决方案：
要避免这种情况，将计算根节点字体大小的js脚本移动到页面的最前面，即head标签内。
立即学习“前端免费学习笔记（深入）”；
原因：
当浏览器加载页面时，它会按照顺序执行页面中的代码。如果根节点字体大小计算的js脚本位于页面底部，当浏览器运行到该代码时，页面内容已经加载并显示了。随后，根节点字体大小赋值会触发页面重新渲染，从而导致css扭曲。
示例：
(function () { const rootFontSize = 16; document.documentElement.style.fontSize = rootFontSize + "px"; })();
将这段代码移动到head标签内后，浏览器将在加载页面其他内容之前执行它，从而避免根节点字体大小计算对已显示页面的影响。
参考：
[amfe/lib-flexible at master](https://github.com/amfe/lib-flexible/blob/master/src/index.js)
以上就是移动端项目中，如何消除rem字体大小计算带来的CSS扭曲？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1631969.html
微信扫一扫 
支付宝扫一扫 
