1. 首页 > 快讯

移动端rem计算根节点字体大小导致CSS变形如何解决)

避免移动端根节点字体大小计算引起的css变形

在使用rem计算根节点字体的大小时,移动端项目在页面首次加载时可能会出现CSS变形的问题。这是由于在根节点字体大小赋值后,页面内容需要重绘。下面介绍解决方法:

解决方案:

将计算根节点字体大小的代码放在页面的最前面,具体来说,放在

标签内。

原理:

立即学习“前端免费学习笔记(深入)”;

此举确保了在页面任何内容显示之前,根节点字体大小就已经赋值。这样,页面加载时就无需重绘内容,避免了CSS变形。

示例:

如果你熟悉flexible.js,可以使用其中的方法:

  1. 在页面中内联flexible.js代码。
  2. 将flexible.js放在所有其他资源加载之前。

参考:

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

本文采摘于网络,不代表本站立场,转载联系作者并注明出处:https://www.iotsj.com//kuaixun/6639.html

联系我们

在线咨询:点击这里给我发消息

微信号:666666