前段时间群里有人问我关于rem的问题。一直想整理一下，但是忘记了。今天终于抽空整理了一下相关知识点！说到rem，就不得不说说移动端的布局。现在很多人都在动px，终端布局还是用的，先说px；px：像素（Pixel），相对于单位长度，px是相对于屏幕分辨率。我们为什么要用rem，rem的诞生也是对webapp的推动，rem完美的解决了webapp的屏幕适配问题。大家都知道移动设备的屏幕尺寸不一样，像素也不一样。那么webapp用px就比较鸡肋了，因为大家都知道px是像素，由屏幕的分辨率决定的。使用px很大程度上影响了webapp的美观。下面介绍如何使用rem。首先我们要设置rem的初始值，然后我们根据这个初始值对各个size进行转换，得到rem值进行布局。1.媒体查询html{font-size:20px;}@mediaonlyscreenand(min-width:401px){html{font-size:25px!important;}}@mediaonlyscreenand(min-width:428px){html{font-size:26.75px!important;}}@mediaonlyscreenand(min-width:481px){html{font-size:30px!important;}}@mediaonlyscreenand(min-width:569px){html{font-size:35px!important;}}@mediaonlyscreenand(min-width:641px){html{font-size:40px!important;}}2。自动设置html的字体大小(function(doc,win){vardocEl=doc.documentElement,resizeEvt='orientationchange'在窗口中？'orientationchange':'resize',recalc=function(){varclientWidth=docEl.clientWidth;如果（！clientWidth）返回；docEl.style.fontSize=20*(clientWidth/320)+'px';};如果（！doc.addEventListener）返回；win.addEventListener(resizeEvt,recalc,false);doc.addEventListener('DOMContentLoaded',recalc,false);})(文件,窗口);3.designWidth：设计稿实际宽度值需要根据实际值设置，maxWidth：稿件最大宽度值，需要根据实际值设置(function(designWidth,maxWidth){vardoc=document,win=window,docEl=doc.documentElement,remStyle=document.createElement("style"),tid;functionrefreshRem(){varwidth=docEl.getBoundingClientRect().width;maxWidth=maxWidth||540;宽度>maxWidth&&(width=maxWidth);varrem=width*100/designWidth;remStyle.innerHTML='html{font-size:'+rem+'像素;}';}if(docEl.firstElementChild){docEl.firstElementChild.appendChild(remStyle);}else{varwrap=doc.createElement("div");wrap.appendChild(remStyle);doc.write(wrap.innerHTML);换行=空；}//RefreshRem只能在设置wiewport后执行，否则refreshRem会执行两次；refreshRem();win.addEventListener("resize",function(){clearTimeout(tid);//防止tid被执行两次=setTimeout(refreshRem,300);},false);win.addEventListener("pageshow",function(e){if(e.persisted){//重新计算clearTimeout(tid);tid=setTimeout(refreshRem,300);}},false);if(doc.readyState==="complete"){doc.body.style.fontSize="16px";}else{doc.addEventListener("DOMContentLoaded",function(e){doc.body.style.fontSize="16px";},false);}})(750,750);
