常常在設定文字大小的時候，最常用的就是這四個單位：px、em、rem、%。 簡單比較這四者的差異？
這裡列出幾個常見的問題：
哪一個是絕對單位？哪一個是相對單位？
px 是絕對單位；
em 是相對單位，其文字大小是相對於父元素 (parent element)；
rem 是相對單位，其文字大小是相對於根元素 (root element)，根元素就是 <html> 標籤，所以是相對於該標籤所指定的文字大小；
% 是相對單位。
em 是相對單位，其文字大小是相對於父元素 (parent element)；
rem 是相對單位，其文字大小是相對於根元素 (root element)，根元素就是 <html> 標籤，所以是相對於該標籤所指定的文字大小；
% 是相對單位。
文字大小該如何計算？
px 是絕對單位，指定 20px，那該文字就是 20px；
em 是相對單位，通常網頁的 <body> 都會預設文字大小為 16px，直接用舉例的方式來實際計算文字大小：
// 先看 html 結構部份 <body> <h1>標題<span>標題內小字</span></h1> </body> // css 樣式，指定文字大小 <style> body{ font-size: 75%; /* 將預設文字大小改成：12px。(12 / 16 * 100% = 75%) */ } h1{ font-size: 2em; /* 實際：12px * 2 = 24px，因為其父元素是 <body> 標籤。 */ } span{ font-size: 0.5em; /* 實際：24px * 0.5 = 12px，因為其父元素是 <h1> 標籤。 */ } </style>
rem(是 root em 的縮寫)：是相對於根元素的文字大小單位，什麼是根元素，也就是 <html> 標籤：
// 先看 html 結構部份 <html> <body> <h1>標題<span>標題內小字</span></h1> </body> </html> // css 樣式，指定文字大小 <style> html{ font-size: 62.5%; /* 將根元素的預設文字大小改為 10px。(10 / 16 * 100% = 62.5%) */ } h1{ font-size: 2rem; /* 實際：10px * 2 = 20px，因為 rem 是相對於根元素 */ } span{ font-size: 1rem; /* 實際：10px * 1 = 10px，因為 rem 是相對於根元素 */ } </style>資料來源：
http://carlos-studio.com/2017/12/26/design-%E7%B6%B2%E9%A0%81%E6%96%87%E5%AD%97%E5%96%AE%E4%BD%8D%EF%BC%8Cpx%E3%80%81em%E3%80%81rem%E3%80%81-%E7%9A%84%E5%B7%AE%E5%88%A5/