移动端（移动端）页面自适应方案—rem布局假设设计姐给我们的设计稿尺寸是750*1340。结合网易和淘宝移动端首页html元素上的动态font-size属性，设计稿的大小，以及前端与设计的协同过程，一般分为以下两种：1.网易方法：介绍：在页面开头引入如下代码，用于动态计算font-size(function(doc,win){vardocEl=doc.documentElement,isIOS=navigator.userAgent.match(/\(i[^;]+;(U;)?CPU.+MacOSX/),dpr=isIOS?Math.min(win.devicePixelRatio,3):1,dpr=window.top===window.self?dpr:1,//当被iframe引用时，缩放dpr=1,scale=1/dpr,resizeEvt='orientationchange'inwindow?'orientationchange':'resize';docEl.dataset.dpr=dpr;varmetaEl=doc.createElement('meta');metaEl.name='viewport';metaEl.content='initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale;docEl.firstElementChild.appendChild(metaEl);varrecalc=function(){varwidth=docEl.clientWidth;如果（宽度/dpr>750）{宽度=750*dpr;}//乘以100，px:rem=100:1docEl.style.fontSize=100*(width/750)+'像素';};recalc()如果(!doc.addEventListener)返回；win.addEventListener(resizeEvt,recalc,false);})(文档,窗口);使用：之前没有介绍过：body{width:750px;height:640px;}引入后：除以100并将px替换为rembody{width:7.5rem;height:6.4rem;}Conversionbasis://乘以100,px:rem=100:1varrecalc=function(){varwidth=docEl.clientWidth;如果（宽度/dpr>750）{宽度=750*dpr;}//乘以100，px:rem=100:1docEl.style.fontSize=100*(width/750)+'px';};二、淘宝方法（推荐方法，尤其是app内嵌页面）：导入：在页面开头导入如下代码动态计算font-size，或者单独放在一个文件中，导入文件也可以；(function(win,lib){vardoc=win.document;vardocEl=doc.documentElement;varmetaEl=doc.querySelector('meta[name="viewport"]');varflexibleEl=doc.querySelector('meta[name="flexible"]');vardpr=0;varscale=0;vartid;varflexible=lib.flexible||(lib.flexible={});if(metaEl){varmatch=metaEl.getAttribute('content').match(/initial\-sc麦酒=([\d\.]+)/);如果（匹配）{scale=parseFloat（匹配[1]）；dpr=parseInt(1/比例);}}elseif(flexibleEl){varcontent=flexibleEl.getAttribute('content');如果（内容）{varinitialDpr=content.match(/initial\-dpr=([\d\.]+)/);varmaximumDpr=content.match(/maximum\-dpr=([\d\.]+)/);如果(initialDpr){dpr=parseFloat(initialDpr[1]);scale=parseFloat((1/dpr).toFixed(2));}if(maximumDpr){dpr=parseFloat(maximumDpr[1]);scale=parseFloat((1/dpr).toFixed(2));}}}if(!dpr&&!scale){varisAndroid=win.navigator.appVersion.match(/android/gi);varisIPhone=win.navigator.appVersion.match(/iphone/gi);vardevicePixelRatio=win.devicePixelRatio;if(isIPhone){//iOS下，对于2屏和3屏，使用2倍程序，其余使用1xreturnif(devicePixelRatio>=3&&(!dpr||dpr>=3)){dpr=3;}elseif(devicePixelRatio>=2&&(!dpr||dpr>=2)){dpr=2;}否则{dpr=1;}}else{//单独定义，定义1个增量dpr=1;}规模=1/dpr;}docEl.setAttribute('data-dpr',dpr);如果(!metaEl){metaEl=doc.createElement('meta');元。setAttribute('名称','视口');metaEl.setAttribute('content','initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no');如果(docEl.firstElementChild){docEl.firstElementChild.appendChild(metaEl);}else{varwrap=doc.createElement('div');裹。appendChild(metaEl);医生。写（包装。innerHTML）；}}函数refreshRem(){varwidth=docEl.getBoundingClientRect().width;//合适的平板if(width/dpr>540){width=540*dpr;}varrem=宽度/10;docEl.style.fontSize=rem+'px';flexible.rem=win.rem=rem;}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=12*dpr+'px';}else{doc.addEventListener('DOMContentLoaded',function(e){doc.body.style.fontSize=12*dpr+'px';},false);}refreshRem();flexible.dpr=win.dpr=dpr;flexible.refreshRem=refreshRem;flexible.rem2px=function(d){varval=parseFloat(d)*this.rem;如果（吨ypeofd==='string'&&d.match(/rem$/)){val+='px';}返回值；}flexible.px2rem=function(d){varval=parseFloat(d)/this.rem;if(typeofd==='string'&&d.match(/px$/)){val+='rem';}返回值；}})(window,window['lib']||(window['lib']={}));使用：在介绍之前：body{width:750px;height:640px;}引入后：@font-size-base:75;body{width:750rem/@font-size-base;height:640rem/@font-size-base;}转换依据：functionrefreshRem(){varwidth=docEl.getBoundingClientRect().width;//适应平板if(width/dpr>540){width=540*dpr;}varrem=宽度/10;docEl.style.fontSize=rem+'px';flexible.rem=win.rem=rem;}这里是less，如果不用less，需要手动计算，当然也可以换算成px:rem=100:1如果想转换成px:rem=100:1，可以修改上面的refreshRem函数：functionrefreshRem(){varwidth=docEl.getBoundingClientRect().width//适配平板if(width/dpr>750){width=750*dpr}varrem=100*(width/750)docEl.style.fontSize=rem+'px'flexible.rem=win.rem=rem;}使用：之前没有介绍过：body{width:750像素；height:640px;}引入后：除以100并将px替换为rembody{width:7.5rem;height:6.4rem;}转换依据是上面修改的代码：functionrefreshRem(){varwidth=docEl.getBoundingClientRect().width//适配tabletif(width/dpr>750){width=750*dpr}varrem=100*(width/750)docEl.style.fontSize=rem+'px'flexible.rem=win.rem=rem;}具体实现原理可以参考：思考前端设计稿从网易和淘宝的font-size和workflow来看，写的很好！希望对有需要的朋友有所帮助！
