可笑了我一个做了1年移动端页面的人，这周才知道有rem这等神物。

这也是我这周入职最大的收获，公司移动端页面基本都是使用rem,淘宝那边的页面我看了下也是。

em是相对于父元素的相对计算，rem是相对于根元素html节点的相对计算，且相对值是html元素的font-size值。

这样优雅的方式就是：针对不同分辨率屏幕设定不同的合适的font-size参考值。然后页面中大多数元素的width、height、font-size甚至margin、padding值都采用rem为单位，这样设计图在不同大小屏幕上都是等比缩放或扩大，做到了真正的显示效果一致。

而以前做项目都是使用流式布局，在页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调。

且使用rem后页面中大多数元素的尺寸都能定死，这样为元素的定位提供了极大的便利，如垂直居中都变得简单起来。

但是对于一些属性并不适合rem，如background-position，使用rem会计算不准确，border-width也没必要使用rem。

html最初的font-size值是由js设置的：

var a = document.documentElement
  , b = a.clientWidth > 750 ? 750 : a.clientWidth;
a.style.fontSize = b / 15 + "px";

（此博文有待进一步挖掘，写的太浅了。。。）