CSS單位主要分析em、rem、fr這三個較難理解的單位吧，平常的px、%、cm那些就不談了嘛。

px在不同場景之下為同樣的值，我們把它稱作絕對單位，而em和rem受外部因素的影響下而改變，因此稱作相對單位。

我們需要了解到為什麽要拓展em，rem這樣的相對單位呢？

比如我就特愛用px，感覺所有的東西都能用px來表現距離，而事實上這種做法早已跟不上時代的步伐了，隨著更高分辨率的顯示器出現，則需要原本的多欄定寬布局，則需要更加靈活多變的響應式布局。

em是最常見的相對長度單位，這是排版中使用的一種度量方式，基準值是當前元素的字號大小。 在CSS中，1em表示當前元素的字號大小，實際值取決於在哪個元素上應用。

以px為單位的基礎字號大小，但希望把它改用em聲明，下面有個簡單的計算公式：目標em值 = 目標像素值 / 父元素（被繼承元素）像素值。

重點就是以父級字號小心進行相對子級的大小變換，但這需要註意到的是不仔細的人還是少采用em為好，當em遇上font-size，事情會變得很復雜。

rem-“font size of the root element”，w3c對於rem的一句描述，rem比em多的一個r也就是root。

前面我們知道em這單位是相對於父級設置字體大小，而rem是相對於根html設置字體大小。

總的來說做響應式布局em和rem是不錯的選擇，不過我更傾向於rem，給html設置好字體大小，後面的元素可以使用確定的rem了。

fr，這個單位主要運用於grid布局中。

而我在學習grid布局的過程中，就一直不明白fr這單位到底是個怎樣的單位？它有什麽樣的作用？

fr單位可以幫助我們創建一個彈列的網格軌道，它代表了網格容器中可用的空間（就像Flexbox中無單位的值）。

當fr與其他單位結合一起用時，fr是基於網格容器可用空間來計算。

註意是剩余可用空間，fr的好處也是幫助我們省去了一部分計算的麻煩。

舉個例子：

grid-template-columns: 1fr 1fr 2fr;

就如這串代碼，網格列，它就將剩余的空間分成了4部分，其中前兩列占1份，後兩列占2份。

再如：

grid-template-columns：2em 1fr 24% 1fr;
這裏的1fr=（網格寬度-2em-網格寬度*24%）/2

總的來說，fr運用於grid布局中是一個非常方便的單位。

還會有補充，未完待續。

CSS單位分析及CSS顏色表示法、顏色表（調色板）