【问题解决】移动端rem适配的时候会出现打开页面时先缩小(放大)后恢复到正常页面的问题

【出现原因】

页面中元素盒子的宽高都是通过rem进行设置的，而rem等于根元素html的font-size大小，而我们的font-size大小是通过js计算后进行设置的。

self-adaption.js：

function setFontSize() {
　　document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
};

window.addEventListener('resize', function () {
　　setFontSize();
}, false);

setFontSize();

页面出现闪跳的原因是页面呈现的时候，js还没有执行，所以页面不正常。

【解决方案】

将js代码添加在head标签内，提前加载。

【补充说明】

在使用webpack或者vue...构建项目的时候，我们self-adaption.js文件通常是在页面的入口文件index.js中导入的。

index.js：

import './common/self-adaption.js'

但如果要在head中添加的话，就不能通过webpack进行打包，这时有两种做法：

（1）直接在script标签中添加js代码

<html>
<head>

<script>
function setFontSize() {
　　document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
};

window.addEventListener('resize', function () {
　　setFontSize();
}, false);

setFontSize();
</script>

</head>
<body>

</body>
</html>

(2)使用script标签引入文件

<html>
<head>

<script src="./self-adaption.js"></script>

</head>
<body>

</body>
</html>

由于在html文件中引入的js文件不会经过webpack进行编译，所以文件不会被正确引用进来，同时self-adaption.js也不会被打包至dist文件夹中。

我们可以通过copy-webpack-plugin插件将self-adaption.js文件拷贝至dist输出文件夹中。