移动端使用rem进行适配
关于移动端的适配问题，总结两个方法，使用的预编译工具是考拉。
方法一
第一步：在布局的首页中引入js文件，主要的js代码如下，
1 var pixelRatio = 1 / window.devicePixelRatio;
2 document.write('<meta name="viewport" content="width=device-width,initial-scale='+ pixelRatio +',minimum-scale='+ pixelRatio +',maximum-scale='+ pixelRatio +',user-scalable=no" />');
3 //获取html节点
4 var html = document.getElementsByTagName('html')[0];
5 //获取屏幕宽度
6 var pageWidth = html.getBoundingClientRect().width;
7 //html的字号
8 html.style.fontSize = pageWidth/16 + 'px';
第二步：在css文件夹下新建一个less后缀名的文件，打开考拉，引入这个less文件，然后就可以在less文件下进行编译。设置@rem:45rem；后面的数值是根据设计图/16得出。
方法二
1 (function(doc,win){
2 var docEle=document.documentElement,
3 resizeEvt='orientationchange' in window?'orientationchange':'resize',
4 recalc=function(){
5 var clientWidth=docEle.clientWidth;
6 if(!clientWidth)return;
7 docEle.style.fontSize=100*(clientWidth/'设计图宽度')+'px';
8 };
9 if(!doc.addEventListener)return;
10 win.addEventListener(resizeEvt,recalc,false);
11 doc.addEventListener('DOMContentLoaded',recalc,false);
12 })(document,window)
