前言移动端rem适配方案回顾总结，是rem布局的精髓所在。1、动态改变html的font-size值。几乎每个浏览器都会将html的font-size初始化为16px。如果动态改变的话，可以暂时将16px设置为rem适配的根节点的初始font-size值。那么如何适配动态修改呢？假设设计稿的宽度为750px，我们定义布局使用1rem=16px的单位，如何适配？chrome中手机iphone模拟器的宽度是375px，刚好是设计稿的一半。我们可以计算一下：此时的1rem应该等于初始化时html节点的font-size的一半，即newFontSize=16/2=8px，那么halftohalf不就是适配了吗？从中可以看出设计稿的宽度/16px=适配设备的宽度/8px。可以看出，新的font-size是指当前设备宽度和原设计稿宽度等，缩放后的最终结果为newFontSize=16px*待适配设备宽度/原设计稿宽度(function(doc,win){varresizeEvt="orientationchange"inwindow?"orientationchange":"resize",setRemResponse=function(){varvM=750;varvfontSize=16;varhtml=doc.documentElement;varnewfontSize=(vfontSize*html.clientWidth)/vM;html.style.fontSize=newfontSize+"px";};doc.addEventListener("DOMContentLoaded",setRemResponse,false);win.addEventListener(resizeEvt,setRemResponse,false);})(文档,窗户）;2.实际使用实测的btn按钮样式从px到rem.btn{width:699px;/*699/16=>43.6875rem;*/高度：90px；/*90/16px=>5.625rem;*/背景:rgba(90,173,246,1);边界半径：6px；/*6/16=>0.375rem;*/}自己计算太麻烦，用scss定义函数代替计算过程@functionpxToRem($initialStyle){@return$initialStyle/16*1rem;}那么上面的css改写为：.btn{宽度：pxToRem(699)；高度：pxToRem（90）；背景：rgba（90、173、246、1）；边界半径：pxToRem（6）；}补充：vscode的插件cssrem支持计算，将我们在css和scss中输入的px转换成rem单位。默认字体大小为16px。16px*需要适配的设备宽度/原设计稿的宽度每次计算需要除以16。这很麻烦。如果我们把初始html根节点的font-size改成方便计算的话，最终会作为除数。多少？100方便吗？正确的！constoHtml=document.documentElement;constclientWidth=oHtml.clientWidth;varvM=750;varvfontSize=100;//移动设备oHtml.style.fontSize=(vfontSize*clientWidth)/vM+"px";2.实际使用还是上面熟悉的btn，将px转为rem，计算结果.btn{宽度：699px；/*699/100=>6.99rem;*/高度：90px；/*90/100=>0.9rem;*/背景：rgba(90,173,246,1);半径：6px；/*6/100=>0.06rem;*/}不得不说，有scss真是太方便了！@functionreduced100($initialStyle){@return$initialStyle/100*1rem;}那么上面的css函数方法改写为：.btn{width:reduced100(699);身高：减少100（90）；背景：rgba（90、173、246、1）；border-radius:reduced100(6);}怎么样，rem就这么简单！！！对于工具功能上面的方法，可以二选一。毕竟现在javascript的执行效率还不错！(function(doc,win){varresizeEvt="orientationchange"inwindow?"orientationchange":"resize",setRemResponse=function(){varvM=750;varvfontSize=16;varhtml=doc.documentElement;varnewfontSize=(vfontSize*html.clientWidth)/vM;html.style.fontSize=newfontSize+"px";};doc.addEventListener("DOMContentLoaded",setRemResponse,false);win.addEventListener(resizeEvt,setRemResponse,false);})(文档,窗口);
