1. 什么是REM

页面布局中常用的三种单位分别是：

像素px:相对于显示器屏幕分辨率进行计算
em：一种相对长度单位，相对于当前对象内文本的字体尺寸，一般来说是一个m或者一个汉字的宽度

rem

rem的大小相对于根元素的大小进行计算

在使用REM的移动端布局方案中，遵循以下两条规则

所有手机显示的界面都是一样的，只有页面的大小不同
1 rem == html font-size == viewport width

2.怎么用REM

CSS实现

首先在根元素设置需要的相对单位，然后body选择器中重置

html{font-size:100px;}
body{font-size:14px;}

使用rem代替px，直接除根元素的字体大小即可

.menu {
    padding: .1rem .3rem;/*相当于10px 30px*/
}

JS实现

一般使用JS动态调节REM的数值来配合页面的大小

可以绑定监听事件，dom加载后和尺寸变化时改变font-size

//改变font-size
(function(doc,win){
    var docEI = doc.documentElement,
    resizeEvt = 'orientationchange' in window?'orientataionchange':'resize',
    recalc = function(){
        var clientWidth = docEI.clientWidth;
        if(!clientWidth) return;
        //100是字体大小，1536是开发时浏览器窗口的宽度，等比计算
        docEI.style.fontSize = 100*(clientWidth/1536)+'px';
    }

    if(!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document,window);