02移动端-以一个固定尺寸(750px)为标准-将 px 转化为 rem
(function(win,lib){vardoc=win.document;vardocEl=doc.documentElement;vardevicePixelRatio=win.devicePixelRatio;vardpr=1;varscale=1;//设置vierPortfunctionsetViewport(){dpr=1;win.devicePixelRatioValue=dpr;scale=1/dpr;varmetaEl=doc.createElement('meta');metaEl.setAttribute('name','viewport');metaEl.setAttribute('content','initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no');if(docEl.firstElementChild){docEl.firstElementChild.appendChild(metaEl);}else{varwrap=doc.createElement('div');wrap.appendChild(metaEl);doc.write(wrap.innerHTML);}}setViewport();varnewBase=100;//把页面划分为100等分//设置RemfunctionsetRem(){varvisualView=Math.min(docEl.getBoundingClientRect().width,lib.maxWidth);newBase=(100*visualView)/lib.desinWidth;docEl.style.fontSize=newBase+'px';}vartid;lib.desinWidth=640;lib.baseFont=18;lib.maxWidth=540;lib.init=function(){win.addEventListener('resize',function(){clearTimeout(tid);tid=setTimeout(setRem,300);},false);win.addEventListener('pageshow',function(e){if(e.persisted){clearTimeout(tid);tid=setTimeout(setRem,300);}},false);if(doc.readyState==='complete'){doc.body.style.fontSize=lib.baseFont*dpr+'px';}else{doc.addEventListener('DOMContentLoaded',function(e){doc.body.style.fontSize=lib.baseFont*dpr+'px';},false);}setRem();docEl.setAttribute('data-dpr',dpr);};})(window,window['adaptive']||(window['adaptive']={}));window['adaptive'].desinWidth=750;window['adaptive'].baseFont=12;window['adaptive'].maxWidth=540;window['adaptive'].init();以上代码以设计稿750px的为标准,如果是非750px,在实际页面中,将它转化为750,然后再做转化,根据rem,将一个页面平均分成多少个等分,做移动端适配。将这段js代码命名为一个mobile-adaption.js引入到页面中,就可以愉快的使用了,将px转化为rem,实现自适应布局。在不同的设备当中保持一致。每个公司都有自己的一套标准,有的也用手淘那一方案.遵循自己公司开发规范即可。
来自:CSS、CSS3-px rem等单位