對于繪圖和印刷而言，“單位”相當重要，然而在網頁排版里，單位也是同樣具有重要性，在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，但如果在96dpi的系統上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 cm = 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的設定，因此使用上還是得稍微注意一下啰！

更多大型互聯網web前端實戰操作，在線解析，學習指導，學習資源，點：【WEB前端資源】

總結

以上是生活随笔為你收集整理的rem 前端字体_web前端入门到实战：一次搞懂CSS字体单位：px、em、rem和%的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。