REM是CSS3引入的一个新的单位。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。

什么是REM

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

为什么用在移动端

出于兼容性的考虑，在pc端由于各个浏览器厂商对rem支持的错综复杂，有些还不支持，比如早起的ie6,ie7,ie8;但是在移动端就不存在兼容性问题了，可以放心大胆的使用。

###怎么使用 1.在head中加入下面这段js

!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            if(!width) return;
            if(width>=640){
                docEle.style.fontSize = 20 * (640 / 320) + "px";
            }else{
                docEle.style.fontSize = 20 * (width / 320) + "px";
            }
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

2.css写法： 设计稿中元素的宽高除(20 * (640 / 320)),单位用rem表示。

3.显示效果

iphone4：

iphone6：

iphone6s：

安卓：

The best preparation for tomorrow is doing your best today.