對於繪圖和印刷而言，「單位」很相當重要的，然而在網頁排版裡，單位也是同樣具有重要性，在CSS3 普及以來，更添加了一些方便好用的單位( px、em、rem.. .等)，這篇文章將整理這些常用的CSS 單位，希望能夠幫助到你在工作上能使用的更加得心應手。

「網頁」和「印刷」的單位

目前我們接觸的範圍來說，若要把單位做區分，最簡單可以分為「網頁」和「印刷」兩大類，通常對於CSS來說只會應用到網頁的樣​​式，畢竟真正要做印刷，還是會傾向通過排版軟體來進行設計。

網頁( 單位 )

• px：絕對單位，代表屏幕中每個「點」( pixel )。
• em：相對單位，每個子元素通過「倍數」乘以父元素的px值。
• rem：相對單位，每個元素通過「倍數」乘以根元素的px值。
• %：相對單位，每個子元素通過「百分比」乘以父元素的px值。

網頁( 屬性名稱 )

• medium：預設值，等於16px ( h4預設值)
• xx-small：medium的0.6倍( h6預設值)
• x-small：medium的0.75倍
• small：medium的0.8倍( h5預設值，W3C定義為0.89，實測約為0.8 )
• large：medium的1.1倍( h3預設值，W3C定義為1.2，實測約為1.1 )
• x-large：medium的1.5倍( h2預設值)
• xx-large：medium的2倍( h1預設值)
• smaller：約為父層的80%
• larger：約為父層的120%

印刷（簡單瞭解下）

• pt：印刷機的每個「點」，定義為1 pt ＝ 1/72 in，如果在72 dpi的系統上1 px = 1 pt，但如果在96 dpi的系統上1 px = 0.75 pt ( 72 /96 = 0.75 )。
• in：英寸，在96 dpi的系統上1 in = 96 px。
• cm：釐米，在96 dpi的系統上1 cm = 37.795275593333 px。
• mm：毫米，在96 dpi的系統上1 mm = 3.7795275593333 px。

示例展示

以下將展示四種不同單位的示例，為了直觀簡單，四個示例都套用預設的div格式，純粹改變font-size看看有何不同，由於子元素若沒有設定font-size，會自動繼承父元素的font-size，使用上就應該要預先初始化字體大小，下面這兩段CSS可以將所有的元素字體大小預設為16px，接下來可以進行個別調整。

html{
 font-size:16px;
}
html * {
 font-size: 1rem;
}

1、px

px 是絕對單位，因此只要設定多少px，就會精確的呈現，對於一些講求精準位置的排版而言十分有用，如示例展示的，指定多大 px 字體就會多大。

<div style="font-size:16px;">16px
 <div style="font-size:20px;">20px
 <div style="font-size:24px;">24px
 <div style="font-size:16px;">16px
 <div style="font-size:32px;">32px</div>
 </div>
 </div>
 </div>
</div>

2、em

em是相對單位，為每個子元素通過「倍數」乘以父元素的px值，如果我們每一層div都使用1.2em，最內層就會是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。(瀏覽器預設字體大小為16px，若無特別指定則會直接繼承父元素字體大小)

<div style="font-size:1.2em;">1.2em
 <div style="font-size:1.2em;">1.2em
 <div style="font-size:1.2em;">1.2em
 <div style="font-size:1.2em;">1.2em
 <div style="font-size:1.2em;">1.2em</div>
 </div>
 </div>
 </div>
</div>

3、rem

rem是相對單位，為每個元素通過「倍數」乘以根元素的px值，如果我們每一層div都使用1.2rem，最內層就會是16px x 1.2 = 19.2px。(根元素指的是html的font-size，預設為16px )。

<div style="font-size:1.2rem;">1.2rem
 <div style="font-size:1.2rem;">1.2rem
 <div style="font-size:1.2rem;">1.2rem
 <div style="font-size:1.2rem;">1.2rem
 <div style="font-size:1.2rem;">1.2rem</div>
 </div>
 </div>
 </div>
</div>

4、%

%百分比是相對單位，和em大同小異，簡單來說em就是百分比除以一百，如果我們每一層div都使用120%，就等同於1.2em，最內層就會是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。

<div style="font-size:120%;">120%
 <div style="font-size:120%;">120%
 <div style="font-size:120%;">120%
 <div style="font-size:120%;">120%
 <div style="font-size:120%;">120%</div>
 </div>
 </div>
 </div>
</div>

5、small、medium、large...等

字體大小的屬性有七種，分別是xx-small、x-small、small、medium、large、x-large和xx-large，除了x-small，其餘六種分別對應h6~h1的標籤文字大小，根據W3C的規範，以medium預設16px為基礎(若html字體預設大小改變，medium也會跟著變)，使用固定的百分比乘以medium的大小，例如ss-small預設為16px x 0.6 = 9.6px(瀏覽器顯示為12px )。

<div style="font-size:xx-small;">xx-small
 <div style="font-size:x-small;">x-small
 <div style="font-size:small;">small
 <div style="font-size:medium;">medium
 <div style="font-size:large;">large
 <div style="font-size:x-large;">x-large
 <div style="font-size:xx-large;">xx-large</div>
 </div>
 </div>
 </div>
 </div>
 </div>
</div>

6、larger、smaller

larger 和smaller 就是固定百分比為單位，larger 為父層的120%，smaller 為父層的80%。

<div style="font-size:medium;">medium
 <div style="font-size:larger;">larger
 <div style="font-size:larger;">larger
 <div style="font-size:larger;">larger
 <div style="font-size:smaller;">smaller
 <div style="font-size:smaller;">smaller
 <div style="font-size:smaller;">smaller</div>
 </div>
 </div>
 </div>
 </div>
 </div>
</div>

小結

熟悉了字體大小單位之後，你就更夠能有系統的進行設計整個網站的CSS字體架構，不過font-size 本身和font-family 有著一些複雜的關係，不同的font-family 有時也會影響font-size 的設定，因此使用上還是得稍微注意一下囉！