px

對(duì)于px，大家都不陌生。它是一個(gè)相對(duì)于屏幕的相對(duì)長(zhǎng)度單位。

em

em也是一個(gè)相對(duì)長(zhǎng)度單位，但它相對(duì)的是父級(jí)元素的字體大小。
對(duì)于em有一個(gè)推算過(guò)程：
如果沒(méi)有定義自己的font-size，則：瀏覽器默認(rèn)：1em = 16px
所以：
12px = 0.75em
10px = 0.625em
但是如果每次都這樣進(jìn)行計(jì)算很麻煩，而且開(kāi)發(fā)效率也很低，因此為了簡(jiǎn)化計(jì)算，我們將瀏覽器的font-size設(shè)置為62.5%，這樣：
1em = （16px * 62.5%） = 10px； 1.2em = 12px
依次類(lèi)推，要使用em這個(gè)相對(duì)長(zhǎng)度單位，只要我們?cè)赽ody標(biāo)簽里面設(shè)置了font-size為62.5%，這樣只要就可以得到計(jì)算公式：(n)px = (n \ 10)em

但是，em單位是相對(duì)的，不是固定的，是逐級(jí)繼承的（一層一層向上計(jì)算），舉個(gè)例子：
比如，一個(gè)div里面嵌套了一個(gè)div，這兩個(gè)div都設(shè)置了font-size為1.2em，瀏覽器的font-size設(shè)置為62.5%，此時(shí)，最里層的div的font-size大小是：（1.2 * 1.2） = 1.44em。

rem

rem也是相對(duì)長(zhǎng)度單位，從它的單位也可以看出，它跟em比較，多了個(gè) r 字母，它的意思就是root（根）的意思。簡(jiǎn)單來(lái)說(shuō)，就是它是相對(duì)于根節(jié)點(diǎn)（html標(biāo)簽）的font-size而言的。這樣子，就消除了em單位逐級(jí)繼承的缺點(diǎn)。
舉個(gè)例子：
先將html標(biāo)簽設(shè)置為62.5%，這樣，html里面的任何子標(biāo)簽都是繼承于這個(gè)標(biāo)簽，也就是說(shuō)相對(duì)于這個(gè)標(biāo)簽。所以，不論標(biāo)簽中有多少級(jí)的嵌套，最里層標(biāo)簽的font-size的計(jì)算公式永遠(yuǎn)是：(n)px = (n \ 10)rem