基本知识:
使用 em 和 rem 单位可以让我们的设计更加灵活，能够控制元素整体放大缩小，而不是固定大小。 我们可以使用这种灵活性，使我们在开发期间，能更加快速灵活的调整，允许浏览器用户调整浏览器大小来达到最佳体验。
1rem = 16px;
1em = 16px;
（这个不一定，根据浏览器默认的字体大小来调整，一般浏览器字体默认16px）
rem相对html顶部元素大小当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。
em相对父元素大小。(这个一般都这样叫，其实也没错，只是当你在本身设置了字体大小em，长度就根据这个字体大小来对比计算，而不是根据父元素，父元素的字体大小可以影响 em 值，但这种情况的发生，纯粹是因为继承）
rem和em一般不用16px计算，不好算，一般转换1rem = 100px;
比较：
个人喜欢rem,（可能是高中物理考试参照物一直不懂，火车上放小球，站在飞机上和大马路看的区别....），因为有一个固定参照点，所有的一切都按照一个点计算比较。但是有时候也比较麻烦，因为所有都按照一个点计算长度。有时候相对更好点（比如拿一个死胖子来对比日本前十nv，你会发现根本没有对比性，然而要你根据死胖子来比较这十个nv哪个更好看那就很难....）,
所以，我是这样写的，当你修饰一个大大的框时，最好用rem，因为好计算，最外层的div啊，一个文本框的大小啊，导航条啊，一般用rem.
那什么时候用em嘞，当你需要修饰一个按钮里的字体时，或者修饰父元素长度已知并且好算时（width = 10rem.....）可以尝试使用em
原文: http://www.w3cplus.com/css/when-to-use-em-vs-rem.html ? w3cplus.com)