rem(font size of the root element)是指相对于根元素的字体大小的单位。
我们经常会看到rem值设置为62.5%,

html {font-size: 62.5%;}

这是因为现在浏览器中的默认的字体大小都是16px,62.5%*16px=10px;所以1rem=10px;方便计算。但是这有一个bug,就是中文版的chrome支持的最小字体是12px,那么1rem最小值就是12px,而不是10px了。

可以从两个方面解决这个bug,
1.设置1rem=100px;

html {font-size: 625%;}

2.采用绝对的px值设置。如

html {font-size:20px;}

到这里肯定有很多人会问我怎么计算出不同分辨率下rem的值?
在移动端,随着iphone6和plus的加入,屏幕像素宽度有320,384,480,640,1080等,大有赶上电脑屏幕的趋势阿。我们可以通过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;
                          docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
                          };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);