[Design] 網頁文字單位,px、em、rem、% 的差別

常常在設定文字大小的時候,最常用的就是這四個單位:px、em、rem、%。 簡單比較這四者的差異?

這裡列出幾個常見的問題:

哪一個是絕對單位?哪一個是相對單位?

px 是絕對單位;
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>

什麼時候要用 px?什麼時候要用 em?什麼時候要用 rem?什麼時候要用 %?

其實這真的比較沒有標準答案,視情況而定。
然而個人目前比較常用的方式是設定文字大小會是使用 rem,也就是會先使用 % 的方式,設定 html 標籤的預設文字大小,再使用 rem 單位在其他文字上面,然後搭配有時 em,有時 px。


有任何問題,歡迎底下留言!!!將有小編回覆。

您可在此處留言

搶先留言!

avatar
  Subscribe  
Notify of