近期项目做手机页面，前台html全部外包出去，拿到页面后发现页面中的所有长度单位全部使用rem，第一次接触rem是在查看淘宝首页代码的时候，网上查了一下知道rem是基于根元素的字体大小的单位，没有深究，一直觉得用处不大。直到近期真正做起项目，才真正感受到了rem之美。

rem介绍

REM（Font size of the root element）是指相对于根元素的字体大小的单位。和em单位不同，em的长度是相对于父级元素font-size的，而rem是相对于根元素的。

rem的优点

相对于流布局、响应式布局等适配方式，REM 适配更为灵活，在不同屏幕尺寸上根据根节点来等比适配

兼容性好（Android 2.1+ / iOS 4.1+）

rem的使用

之前做手机端的页面，为了适配所有的手机分辨率，采用了全部百分比宽度的解决方案，这样实现起来没问题，但是控制死板，且控制难度较大，经常导致不同分辨率下页面缩放比例不一致。rem不一样，rem是基于跟元素font-size进行缩放的，这个特性很重要，换了分辨率之后简单粗暴的放大font-size就可以了。

下图展示了假定按照640作为标准尺寸时，font-size、px和rem的情况

由上图可知，元素的真正展示宽度和font-size是等比缩放的，举例说明即640宽度和480宽度下，1rem的真正宽度比例为20/15，而这个宽度比也正是屏幕的宽度比640/480。通过这个特性，前端程序可以通过js来改变不同分辨率下的font-size，进而实现不同分辨率下同比例缩放，暴力适配所有分辨率。

可以参考如下代码：

(function(doc, win) {
    var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 
    recalc = function() {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        if (clientWidth >= 750) {
            clientWidth = 750;
        }
        docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
    };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);