·px為單位
px（像素）是絕對(duì)單位焰坪，頁面按精確像素展示趣倾，使頁面較穩(wěn)定和相對(duì)固定一些。但這種方法存在一個(gè)問題某饰，用戶在瀏覽我們制作的web頁面時(shí)儒恋，如果他改變了瀏覽器的字體大小，或是縮放黔漂、放大頁面诫尽，這時(shí)會(huì)使頁面布局被打亂。如今web頁面都提倡采用響應(yīng)式布局炬守，顯然使用px為單位不能夠達(dá)到響應(yīng)式的效果牧嫉。
?·em為單位
em是相對(duì)單位，基準(zhǔn)點(diǎn)為父節(jié)點(diǎn)字體的大小。上面說到使用px為單位的web頁面會(huì)遇到的問題可以使用em來解決酣藻。
在使用em做單位時(shí)曹洽，我們需要知道當(dāng)前元素的父級(jí)元素的字體大小設(shè)置。因?yàn)閑m就是一個(gè)相對(duì)值辽剧，而且是一個(gè)相對(duì)于父元素的值送淆，其真正的計(jì)算公式是：
1?/?父元素的font-size?*?需要轉(zhuǎn)換的像素值?=?em值。
這樣的情況下怕轿，“1.2em”可以是“12px”偷崩，也可以是“14px”，總之是一個(gè)不確定的值撤卢。如此以來我們?cè)陧撁嬷谱鞯倪^程中环凿，要時(shí)時(shí)顧及父元素的字體大小來計(jì)算當(dāng)前元素的em值。
?·rem為單位
rem是CSS3新引進(jìn)的度量單位其中之一放吩，也是相對(duì)單位智听。可以理解為“root?em”渡紫，基準(zhǔn)點(diǎn)是根元素的字體大小到推。這就意味著，我們只需要在根元素確定一個(gè)參考值惕澎，就可以避開中間繁瑣的換算過程進(jìn)行頁面制作莉测。
因?yàn)?em 是相對(duì)于父元素的倍數(shù)，所以你可能在許多層嵌套的 em 中找不到一個(gè)固定值唧喉，rem 就是可以隨時(shí)拿來用的一個(gè)固定參考值捣卤。有了根元素的值，我們就可以只改變一個(gè)值八孝，再結(jié)合 media query董朝，就可以控制不同屏幕上有不同的字體的大小了。
