基于rem的移动端自适应解决方案

adaptivejs源码：

(function(win,lib){
vardoc=win.document;
vardocEl=doc.documentElement;

vardevicePixelRatio=win.devicePixelRatio;
vardpr=1;//物理像素与逻辑像素的对应关系
varscale=1;//css像素缩放比率
//设置viewport
functionsetViewport(){
dpr=1;
win.devicePixelRatioValue=dpr;
//win.devicePixelRatio=win.devicePixelRatio*win.devicePixelRatio;
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;

functionsetRem(){
varvisualView=Math.min(docEl.getBoundingClientRect().width,540);//visualviewport
newBase=100*visualView/lib.desinWidth;
docEl.style.fontSize=newBase+'px';
}
vartid;
lib.desinWidth=640;
lib.baseFont=18;
lib.init=function(){
win.addEventListener('resize',function(){
clearTimeout(tid);
tid=setTimeout(setRem,300);
},false);
/*win.addEventListener('onorientationchange',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']={}));

百度理财的H5站我们都采用这种方式开发，比如：
页面：https://8.baidu.com/template/index/current.html

计算html元素的font-size,使1rem等于100px,方便快速开发

使用方法：

在页面head写入以下代码，实时更新html的fontsize:
<scriptsrc="js/adaptive.js"></script>//有缩放，精确还原设计图
<scriptsrc="js/adaptive-version2.js"></script>//没有缩放，能快速开发的版本
<script>
window['adaptive'].desinWidth=640;//设计图宽度
window['adaptive'].baseFont=18;//没有缩放时的字体大小
window['adaptive'].maxWidth=480;//页面最大宽度默认540
window['adaptive'].init();//调用初始化方法
</script>

.main-info{
height:0.88rem;
padding-bottom:0.24rem;
}
.fund-info{
position:relative;
font-weight:normal;
padding:0.2rem0;
padding-right:1.7rem;
padding-left:0.23rem;
font-size:0.32rem;
line-height:1;
}

注意：如果设计图宽度大于document的宽度，0.01rem将小于1px,故如果设计图是1px,在css中仍然用1px显示。

优化宽度问题

window['adaptive'].maxWidth=480;//设置最大宽度，默认540px

body{
max-width:6.4rem;//设计图宽度为640px时为6.4rem,750时为7.5rem，以此类推
margin:0auto;
}
body*{
max-width:6.4rem;//设计图宽度为640px时为6.4rem,750时为7.5rem，以此类推
}