對(duì)于繪圖和印刷而言，「單位」很相當(dāng)重要的，然而在網(wǎng)頁(yè)排版里，單位也是同樣具有重要性，在css3 普及以來(lái)，更添加了一些方便好用的單位( px、em、rem.. .等)，這篇文章將整理這些常用的CSS 單位，希望能夠幫助到你在工作上能使用的更加得心應(yīng)手。
「網(wǎng)頁(yè)」和「印刷」的單位
目前我們接觸的范圍來(lái)說(shuō)，若要把單位做區(qū)分，最簡(jiǎn)單可以分為「網(wǎng)頁(yè)」和「印刷」兩大類，通常對(duì)于CSS來(lái)說(shuō)只會(huì)應(yīng)用到網(wǎng)頁(yè)的樣??式，畢竟真正要做印刷，還是會(huì)傾向通過(guò)排版軟體來(lái)進(jìn)行設(shè)計(jì)。
網(wǎng)頁(yè)( 單位 )
- px：絕對(duì)單位，代表屏幕中每個(gè)「點(diǎn)」( pixel )。
- em：相對(duì)單位，每個(gè)子元素通過(guò)「倍數(shù)」乘以父元素的px值。
- rem：相對(duì)單位，每個(gè)元素通過(guò)「倍數(shù)」乘以根元素的px值。
- %：相對(duì)單位，每個(gè)子元素通過(guò)「百分比」乘以父元素的px值。
網(wǎng)頁(yè)( 屬性名稱 )
- medium：預(yù)設(shè)值，等于16px ( h4預(yù)設(shè)值)
- xx-small：medium的0.6倍( h6預(yù)設(shè)值)
- x-small：medium的0.75倍
- small：medium的0.8倍( h5預(yù)設(shè)值，W3C定義為0.89，實(shí)測(cè)約為0.8 )
- large：medium的1.1倍( h3預(yù)設(shè)值，W3C定義為1.2，實(shí)測(cè)約為1.1 )
- x-large：medium的1.5倍( h2預(yù)設(shè)值)
- xx-large：medium的2倍( h1預(yù)設(shè)值)
- smaller：約為父層的80%
- larger：約為父層的120%
印刷（簡(jiǎn)單了解下）
- pt：印刷機(jī)的每個(gè)「點(diǎn)」，定義為1 pt ＝ 1/72 in，如果在72 dpi的系統(tǒng)上1 px = 1 pt，但如果在96 dpi的系統(tǒng)上1 px = 0.75 pt ( 72 /96 = 0.75 )。
- in：英寸，在96 dpi的系統(tǒng)上1 in = 96 px。
- cm：厘米，在96 dpi的系統(tǒng)上1 cm = 37.795275593333 px。
- mm：毫米，在96 dpi的系統(tǒng)上1 mm = 3.7795275593333 px。
示例展示
以下將展示四種不同單位的示例，為了直觀簡(jiǎn)單，四個(gè)示例都套用預(yù)設(shè)的div格式，純粹改變font-size看看有何不同，由于子元素若沒(méi)有設(shè)定font-size，會(huì)自動(dòng)繼承父元素的font-size，使用上就應(yīng)該要預(yù)先初始化字體大小，下面這兩段CSS可以將所有的元素字體大小預(yù)設(shè)為16px，接下來(lái)可以進(jìn)行個(gè)別調(diào)整。
html{
font-size:16px;
}
html * {
font-size: 1rem;
}
1、px
px 是絕對(duì)單位，因此只要設(shè)定多少px，就會(huì)精確的呈現(xiàn)，對(duì)于一些講求精準(zhǔn)位置的排版而言十分有用，如示例展示的，指定多大 px 字體就會(huì)多大。
<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是相對(duì)單位，為每個(gè)子元素通過(guò)「倍數(shù)」乘以父元素的px值，如果我們每一層div都使用1.2em，最內(nèi)層就會(huì)是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。(瀏覽器預(yù)設(shè)字體大小為16px，若無(wú)特別指定則會(huì)直接繼承父元素字體大小)
<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是相對(duì)單位，為每個(gè)元素通過(guò)「倍數(shù)」乘以根元素的px值，如果我們每一層div都使用1.2rem，最內(nèi)層就會(huì)是16px x 1.2 = 19.2px。(根元素指的是html的font-size，預(yù)設(shè)為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、%
%百分比是相對(duì)單位，和em大同小異，簡(jiǎn)單來(lái)說(shuō)em就是百分比除以一百，如果我們每一層div都使用120%，就等同于1.2em，最內(nèi)層就會(huì)是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，其余六種分別對(duì)應(yīng)h6~h1的標(biāo)簽文字大小，根據(jù)W3C的規(guī)范，以medium預(yù)設(shè)16px為基礎(chǔ)(若html字體預(yù)設(shè)大小改變，medium也會(huì)跟著變)，使用固定的百分比乘以medium的大小，例如ss-small預(yù)設(shè)為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>
小結(jié)
熟悉了字體大小單位之后，你就更夠能有系統(tǒng)的進(jìn)行設(shè)計(jì)整個(gè)網(wǎng)站的CSS字體架構(gòu)，不過(guò)font-size 本身和font-family 有著一些復(fù)雜的關(guān)系，不同的font-family 有時(shí)也會(huì)影響font-size 的設(shè)定，因此使用上還是得稍微注意一下啰！
