技術標籤：二、ECMA學習cssjavascriptjs

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){
			 vardocEl=doc.documentElement,
			 resizeEvt=
			 "orientationchange"inwindow?"orientationchange":"resize",
			 recalc=function(){
			 varclientWidth=docEl.clientWidth;
			 if(!clientWidth)return;
			 if(clientWidth>=750){
			 docEl.style.fontSize="100px";
			 }else{
			 docEl.style.fontSize=100*(clientWidth/750)+"px";
			 }
			 varhtml=document.getElementsByTagName("html")[0];
			 varsettedFs=(settingFs=parseInt(100*(clientWidth/750)));
			 varwhileCount=0;
			 while(true){
			 varrealFs=parseInt(window.getComputedStyle(html).fontSize);
			 vardelta=realFs-settedFs;
			 //不相等
			 if(Math.abs(delta)>=1){
			 if(delta>0)settingFs--;
			 elsesettingFs++;
			 html.setAttribute(
			 "style",
			 "font-size:"+settingFs+"px!important"
			 );
			 }elsebreak;
			 if(whileCount++>100)break;
			 }
			 };
			 if(!doc.addEventListener)return;
			 win.addEventListener(resizeEvt,recalc,false);
			 doc.addEventListener("DOMContentLoaded",recalc,false);
			 })(document,window);
 

倉促時間倉促文章。