移动端开发rem实现屏幕适配及处理页面加载页面坍塌样式错乱网页闪烁问题

rem布局在加载的时候会出现元素一开始很小，闪烁一下恢复正常大小

 

问题的原因无非就是html一开始没有设置字体大小嘛，那我们就一开始按最常用的iPhone 6 尺寸，设置html的font-size: 50px;好了，设置html的font-size: 50px;就合理了吗？我的回答是，至少变化的范围非常小，以360px宽的设备为例，根字体大小应该是48px；以前相当于是从0px-48px，现在是50px-48px，不会造成很明显的闪烁问题。

至于为什么设置为50px；首先，设计稿是基于750px来设计的，我们重构稿实现的时候根元素大小应该是设置为50px（在规定1rem=100px的前提下）；其次，720px和750px这两个设备尺寸，是安卓和IOS设备中占比比较大的设备尺寸。

所以：移动端适配可以采用js动态计算及结合在公用样式中设置默认字体大小（html{font-size:50px}）

 (function (doc, win) {
			       var docEl = doc.documentElement,
			         resizeEvt =
			           "orientationchange" in window ? "orientationchange" : "resize",
			         recalc = function () {
			           var clientWidth = docEl.clientWidth;
			           if (!clientWidth) return;
			           if (clientWidth >= 750) {
			             docEl.style.fontSize = "100px";
			           } else {
			             docEl.style.fontSize = 100 * (clientWidth / 750) + "px";
			           }
			           var html = document.getElementsByTagName("html")[0];
			           var settedFs = (settingFs = parseInt(100 * (clientWidth / 750)));
			           var whileCount = 0;
			           while (true) {
			             var realFs = parseInt(window.getComputedStyle(html).fontSize);
			             var delta = realFs - settedFs;
			             //不相等
			             if (Math.abs(delta) >= 1) {
			               if (delta > 0) settingFs--;
			               else settingFs++;
			               html.setAttribute(
			                 "style",
			                 "font-size:" + settingFs + "px!important"
			               );
			             } else break;
			             if (whileCount++ > 100) break;
			           }
			         };
			       if (!doc.addEventListener) return;
			       win.addEventListener(resizeEvt, recalc, false);
			       doc.addEventListener("DOMContentLoaded", recalc, false);
			     })(document, window);

仓促时间仓促文章。