·px为单位

px（像素）是绝对单位，页面按精确像素展示，使页面较稳定和相对固定一些。但这种方法存在一个问题，用户在浏览我们制作的web页面时，如果他改变了浏览器的字体大小，或是缩放、放大页面，这时会使页面布局被打乱。如今web页面都提倡采用响应式布局，显然使用px为单位不能够达到响应式的效果。

 ·em为单位

em是相对单位，基准点为父节点字体的大小。上面说到使用px为单位的web页面会遇到的问题可以使用em来解决。

在使用em做单位时，我们需要知道当前元素的父级元素的字体大小设置。因为em就是一个相对值，而且是一个相对于父元素的值，其真正的计算公式是：

1 / 父元素的font-size * 需要转换的像素值 = em值。

这样的情况下，“1.2em”可以是“12px”，也可以是“14px”，总之是一个不确定的值。如此以来我们在页面制作的过程中，要时时顾及父元素的字体大小来计算当前元素的em值。

 ·rem为单位

rem是CSS3新引进的度量单位其中之一，也是相对单位。可以理解为“root em”，基准点是根元素的字体大小。这就意味着，我们只需要在根元素确定一个参考值，就可以避开中间繁琐的换算过程进行页面制作。

因为 em 是相对于父元素的倍数，所以你可能在许多层嵌套的 em 中找不到一个固定值，rem 就是可以随时拿来用的一个固定参考值。有了根元素的值，我们就可以只改变一个值，再结合 media query，就可以控制不同屏幕上有不同的字体的大小了。