px/em/rem

px

对于px，大家都不陌生。它是一个相对于屏幕的相对长度单位。

em

em也是一个相对长度单位，但它相对的是父级元素的字体大小。
对于em有一个推算过程：
如果没有定义自己的font-size，则：浏览器默认：1em = 16px
所以：
12px = 0.75em
10px = 0.625em
但是如果每次都这样进行计算很麻烦，而且开发效率也很低，因此为了简化计算，我们将浏览器的font-size设置为62.5%，这样：
1em = （16px * 62.5%） = 10px； 1.2em = 12px
依次类推，要使用em这个相对长度单位，只要我们在body标签里面设置了font-size为62.5%，这样只要就可以得到计算公式：(n)px = (n \ 10)em

但是，em单位是相对的，不是固定的，是逐级继承的（一层一层向上计算），举个例子：
比如，一个div里面嵌套了一个div，这两个div都设置了font-size为1.2em，浏览器的font-size设置为62.5%，此时，最里层的div的font-size大小是：（1.2 * 1.2） = 1.44em。

rem

rem也是相对长度单位，从它的单位也可以看出，它跟em比较，多了个 r 字母，它的意思就是root（根）的意思。简单来说，就是它是相对于根节点（html标签）的font-size而言的。这样子，就消除了em单位逐级继承的缺点。
举个例子：
先将html标签设置为62.5%，这样，html里面的任何子标签都是继承于这个标签，也就是说相对于这个标签。所以，不论标签中有多少级的嵌套，最里层标签的font-size的计算公式永远是：(n)px = (n \ 10)rem