
移动端项目中消除rem字体大小计算带来的css扭曲
在移动端项目中,使用rem计算根节点字体大小可以实现自适应布局。但是,此方法可能会导致页面打开时出现css扭曲,这是因为页面内容在根节点字体大小赋值后重新渲染造成的。
解决方案:
要避免这种情况,将计算根节点字体大小的js脚本移动到页面的最前面,即head标签内。
立即学习“前端免费学习笔记(深入)”;
批量替换指定目录下所有 Git 仓库的远程地址(remote URL)。 当用户需要将 Git 仓库从一个服务器迁移到另一个服务器时使用。 触发词:git remote 替换、git url 批量修改、git 仓库迁移、更换 git 地址、批量修改 remote url。
原因:
当浏览器加载页面时,它会按照顺序执行页面中的代码。如果根节点字体大小计算的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)

















