登录
首页 >  文章 >  前端

移动端项目中，如何消除rem字体大小计算带来的CSS扭曲？

时间：2024-11-07 20:54:53 369浏览 收藏

今天golang学习网给大家带来了《移动端项目中，如何消除rem字体大小计算带来的CSS扭曲？》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

移动端项目中，如何消除rem字体大小计算带来的CSS扭曲？

移动端项目中消除rem字体大小计算带来的css扭曲

在移动端项目中，使用rem计算根节点字体大小可以实现自适应布局。但是，此方法可能会导致页面打开时出现css扭曲，这是因为页面内容在根节点字体大小赋值后重新渲染造成的。

解决方案：

要避免这种情况，将计算根节点字体大小的js脚本移动到页面的最前面，即head标签内。

原因：

当浏览器加载页面时，它会按照顺序执行页面中的代码。如果根节点字体大小计算的js脚本位于页面底部，当浏览器运行到该代码时，页面内容已经加载并显示了。随后，根节点字体大小赋值会触发页面重新渲染，从而导致css扭曲。

示例：

<head>
  <!-- 移动端自适应字体大小计算 -->
  <script>
    (function () {
      const rootFontSize = 16;
      document.documentElement.style.fontSize = rootFontSize + "px";
    })();
  </script>
</head>

将这段代码移动到head标签内后，浏览器将在加载页面其他内容之前执行它，从而避免根节点字体大小计算对已显示页面的影响。

参考：

  • [amfe/lib-flexible at master](https://github.com/amfe/lib-flexible/blob/master/src/index.js)

到这里，我们也就讲完了《移动端项目中，如何消除rem字体大小计算带来的CSS扭曲？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>