移动端rem适配

1、首先你需要定义viewport,只要有了这个，比如宽度640px,就是640像素，不管什么屏幕！你把这个表头去掉，就知道区别了！

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
<!--大概意思是
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例   
maximum-scale - 允许用户缩放到的最大比例  
user-scalable - 用户是否可以手动缩放  
-->

2、rem的大小是根据根元素，就是html标签的font-size样式来定义的，是需要计算的。如果你不做计算，那么默认就是1rem=16px;(就比如你在html文件中，就写一个文字，什么样式标签都不加的情况下，这个文字大小就是16px，默认情况html的font-size就是16px;)。无论你在什么地方看，都是这样1rem=16px！

关于rem计算方式有很多，我就说我用的计算方式吧！
我的计算方式是 ‘(屏幕宽度/效果图宽度)*100’
然后通过js设置html的font-size。
比如 效果宽度是750px, 我在iphone6打开，屏幕宽度就是375px
然后 (375/750)*100=50
然后通过JS，把html标签的font-size设置成50px
这时候
1rem=50px;

(function (win,doc){
    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        html,
        htmlW,
        fontSize,
        rem,
        recalc = function(){
            html = doc.documentElement
            htmlW = html.clientWidth < 750 ? html.clientWidth : 750 //最大 1rem = 100px;
            fontSize = htmlW / 7.5  // 默认按照 IPhone 6 ,1rem = 50px;
            rem = doc.getElementById('rem') || null
            if (rem) {
                rem.parentNode.removeChild(rem)
            }
            /* 创建style标签并添加到Head标签里去 */
            if(doc.all){
                // IE写法
                win.style="html{font-size:" + fontSize + "px;}";
                win.style.id ='rem';
                doc.createStyleSheet("javascript:style");
            }else{
                // 其他标准浏览器写法
                var style = doc.createElement('style');
                style.id = 'rem';
                style.type = 'text/css';
                style.innerHTML="html{font-size:" + fontSize + "px;}";
                doc.getElementsByTagName('HEAD').item(0).appendChild(style);
            }
        }
     if (!doc.addEventListener){
         return;
     }
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(window, document)

//使用方式很简单，比如效果图上，有张图片。宽高都是100px;
//样式写法就是
img{
    width:1rem;
    height:1rem;
}
//这样的设置，比如在屏幕宽度大于等于750px设备上，1rem=100px；图片显示就是宽高都是100px
//比如在iphone6(屏幕宽度：375)上，375/750*100=50px;就是1rem=50px;图片显示就是宽高都是50px;