移动端使用rem进行适配

关于移动端的适配问题，总结两个方法，使用的预编译工具是考拉。

方法一

　　第一步：在布局的首页中引入js文件，主要的js代码如下，

var pixelRatio = 1 / window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width,initial-scale='+ pixelRatio +',minimum-scale='+ pixelRatio +',maximum-scale='+ pixelRatio +',user-scalable=no" />');    
//获取html节点
var html = document.getElementsByTagName('html')[0];
//获取屏幕宽度
var pageWidth = html.getBoundingClientRect().width;
//html的字号
html.style.fontSize = pageWidth/16 + 'px';

　　第二步：在css文件夹下新建一个less后缀名的文件，打开考拉，引入这个less文件，然后就可以在less文件下进行编译。设置@rem:45rem；后面的数值是根据设计图/16得出。

方法二

(function(doc,win){
    var docEle=document.documentElement,
    resizeEvt='orientationchange' in window?'orientationchange':'resize',
    recalc=function(){
        var clientWidth=docEle.clientWidth;
        if(!clientWidth)return;
        docEle.style.fontSize=100*(clientWidth/'设计图宽度')+'px';
    };
    if(!doc.addEventListener)return;
    win.addEventListener(resizeEvt,recalc,false);
    doc.addEventListener('DOMContentLoaded',recalc,false);
})(document,window)