浏览器最终渲染出的页面是以具体的像素为单位的(因为显示器的显示原理是基于像素的啊)，浏览器通过计算em和rem，最终再将这些相对单位转换为具体的像素值渲染出来。这三者可以这样理解：

px是绝对单位，独来独往，棱角分明，一就是一，二就是二，1px就是显示器上的1像素；

em是相对单位，典型的大孝子，唯父母之命是从，自己没有半点主张，全凭父母做主；

rem也是相对单位，是个大家族，老祖宗是html，下面所有人都听老祖宗的。

下面举个例子来加深下印象：

问题：让一段文字的开头一行缩进两个字符，用哪个？

我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字

我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字

我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字

上面的3个case实现的效果都是一样的，但方式方法不尽相同：px简单粗暴，em简洁易懂，rem需要计算。这里很明显case2的方法是首选(无需计算，代码简洁易懂，灵活性强)，这样无论这个段落的字体大小如何变动，其首行总是会缩进2个字符，因为缩进的长度是根据当前段落的字体大小由浏览器计算出来的。

这么看来em是最好的单位了？非也！上面的例子只是千千万实际场景中的一种，我们再发散一下思维，假如页面要做全端(PC、Pad、手机)响应式，咋办？用px的话，每个media query里都要把涉及的px尺寸定义一遍，就像下面这样：@media screen and (min-width:320px) and (max-width:640px) {

.wrapper {width:320px;}

.content {font-size:12px;}

}

@media screen and (min-width:900px) and (max-width:1280px) {

.wrapper {width:900px;}

.content {font-size:14px;}

}

@media screen and (min-width:1440px) {

.wrapper {width:1440px;}

.content {font-size:16px;}

}

可以看出此时用px单位的代码成本比较高，这时候使用em是个好办法，但如果页面层级比较复杂，父级套父级呢？我们知道 em 的计算是基于父级元素的，所以这时候会非常不方便，此时就是rem单位大显神威的时候了，只需定义根元素 html 的字体px大小值，其他rem单位会自动根据这个值计算，再也不用担心父级元素的font-size了，因为它始终是基于根元素(html) 的。另外，使用rem单位时要注意浏览器兼容性。

综上，这三个单位没有好坏之分，都是很有用的属性单位，根据实际情况合理使用能为页面布局排版带来便利。