首先叁怪，本文所討論的“坑”是在做回應(yīng)式網(wǎng)頁設(shè)計(jì)( Responsive Web Design 以下簡稱 RWD）時顯現(xiàn)的菱肖，如果你還只是在做傳統(tǒng)的Web設(shè)計(jì)這算不上是一個坑，因?yàn)閭鹘y(tǒng)的Web頁面是死的，不會自動調(diào)節(jié)不能適應(yīng)各類設(shè)備屏幕尺寸自然不會產(chǎn)生任何尺寸變化的問題。相反地篡诽，要為不同設(shè)備上的用戶提供最好的閱讀或使用體驗(yàn)我們不可避免的就是對元素或字體的尺寸的測量與控制。由其是字體的尺寸榴捡，不知道你是否有以下的經(jīng)歷
同樣的一個網(wǎng)頁杈女，同一份樣式表，但：
- 字體在mac 上很漂亮薄疚，但在windows很難看 ？
- 文字在PC上位置正確赊琳，但在iPad上卻錯了位 街夭？
- 文字塊在Chrome上長度適合，但換了FireFox卻變長了躏筏，甚至換了行 板丽？
如果不幸地被言中，那么真得好好檢查一下樣式表的字體尺寸單位與行高所使用的單位是否正確了趁尼。在CSS3中我們可以應(yīng)用很多的字體單位埃碱，如： pt, px, em, rem 和百分比（這里只討論字體單位，對于vw / vh這類元素長度單位不在此討論范疇）酥泞，這些單位的具體含義是什么砚殿，在什么場合使用，選擇哪個單位在RWD中最為適合呢 芝囤？那么就先來一個一個地去了解它們的意義與用法再對具體應(yīng)用作出選擇似炎。
點(diǎn)陣單位（pt）
PT是point(磅)縮寫，是一種固定長度的度量單位,大小為1/72英寸悯姊。如果在web上使用pt做單位的文字羡藐，字體的大小在不同屏幕（同樣分辨率）下一樣，這樣可能會對排版有影響悯许，但在Word中使用pt相當(dāng)方便仆嗦。因?yàn)槭褂肳ord主要目的都不是為了屏幕瀏覽，而是輸出打印先壕。當(dāng)打印到實(shí)體時瘩扼，pt作為一個自然長度單位就方便實(shí)用了：比如Word中普通的文檔都用“宋體 9pt”，標(biāo)題用“黑體 16pt”等等垃僚，無論電腦怎么設(shè)置邢隧，打印出來永遠(yuǎn)就是這么大。
可見如果將pt作為Web上的首選字體單位那就是一個大坑冈在！pt只適用于打印與普通文檔文字排版并不適用于Web.
像素單位 （px）
根據(jù)顯示器的分辨率來確定長度倒慧，在老式web應(yīng)用中多采用該單位；像素是相對于顯示器屏幕分辨率而言的。譬如纫谅，WONDOWS的用戶所使用的分辨率一般是96像素/英寸炫贤。而MAC的用戶所使用的分辨率一般是72像素/英寸。
兩種關(guān)系：一英寸=72pt(點(diǎn))=96px(像素)付秕，網(wǎng)頁中最常用到的：9pt=12px
px本身是一個極大的坑兰珍，也是最多人愿意跳進(jìn)去的。相對于同一分辨率的屏幕它是一個具體準(zhǔn)確的測量單位询吴，我們用做矢量圖也最喜歡使用這個單位（px值是絕對值）掠河， 所有的瀏覽器也是默認(rèn)使用px來作為尺寸的測量單位，因此在網(wǎng)頁設(shè)計(jì)時都會將px作為標(biāo)準(zhǔn)的尺寸單位使用猛计。當(dāng)沒有互動移連網(wǎng)時代唠摹，沒有RWD之前這是一個正確的選擇，但時代變了px并不能適用于可變字體尺寸的場景奉瘤，使用它會產(chǎn)生排版的變形勾拉。
像素單位會因屏幕分辨率變化而變型，不適于用作在各種設(shè)備上顯示的網(wǎng)頁的首選尺寸單位盗温。
相對長度單位 （em）
em 是一個相對于父節(jié)點(diǎn)尺寸的相對長度單位藕赞，可以理解為字體尺寸的百分比單位，但與百分比不同的是 em是有默認(rèn)常量值的卖局，當(dāng)不明確指定父節(jié)點(diǎn)字體尺寸時斧蜕，任意瀏覽器的默認(rèn)字體高（line-height）都是16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px 砚偶， 那么12px=0.75em, 10px=0.625em惩激。這是一個極為常用的換算公式。 em 是最適用于RWD的一種標(biāo)準(zhǔn)字體尺寸蟹演，支持字體放縮风钻，可根據(jù)屏幕分辨率以及不同瀏覽器間的顯示差異作出微調(diào)，確保字體在不同的設(shè)備上酒请，保持視覺與設(shè)計(jì)的一至性骡技。值得注意的是，既然是相對單位就必定有參照物（元素）羞反，如果參照物不存在側(cè)采用16px作為真實(shí)尺寸布朦。以此理論我們就可以為我們的站點(diǎn)的樣式表的最開始部分加上以下的代碼：
html { font-size: 100%; // 通常默認(rèn)值為 16px }
body { font-size: 0.75em; // 12px }
h1 { font-size: 2em; // 24px }
如果我們想將1em=16px這個默認(rèn)規(guī)則改變的話，如將1em=12px可以寫成這樣：
html { font-size: 75%; // 12px }
body { font-size: 1em; // 12px }
h1 { font-size: 2em; // 24px }
如果我們希望在桌面顯示的字體更為精細(xì)昼窗，而在移動設(shè)備上顯示的字體可更為清晰的話也可以這樣來寫：
html { font-size: 75%; // 12px }
@media only screen and (max-device-width: 480px) {
html { font-size: 100%; // 16px }
}
以上是舉出最簡單的例子以幫助我們理解em的用法是趴，而在實(shí)際應(yīng)用中則需要解決另一方面的問題：默認(rèn)元素樣式。各種瀏覽器對不同的標(biāo)準(zhǔn)元素有不同的默認(rèn)樣式澄惊，由其是字體唆途。如果要保持字體的一至性就需要在樣式表中明確地重寫這些樣式以保證瀏覽器間的兼容性富雅。如：li 的字體會按照ul的字體尺寸計(jì)算相對的大小：
html { font-size: 75%; // 12px }
body { font-size: 1em; // 12px }
li { font-size: 0.833em; // 10px }
當(dāng)然<button/>, <h1>~<h6>, <summary/>, <detail> 等還有很多的元素都需要進(jìn)行這個標(biāo)準(zhǔn)化的過程肛搬，如果覺得這個工作很麻煩也可以去下載著名的 normalize.css 樣式表完成這個重置工作没佑，雖然看起來很麻煩，但是這卻可以避免在整個項(xiàng)目設(shè)計(jì)的過程中掉入這些由于尺寸所帶來的不必要而耗時的調(diào)整温赔。
相對根節(jié)點(diǎn)長度單位 （rem）
CSS3引入新的字體尺寸單位 rem 蛤奢，可以簡單記憶為root rm。
CSS3的出現(xiàn)陶贼，他同時引進(jìn)了一些新的單位啤贩，包括我們今天所說的rem。在W3C官網(wǎng)上是這樣描述rem的——“font size of the root element” 拜秧。下面我們就一起來詳細(xì)的了解rem痹屹。
em單位是相對于父節(jié)點(diǎn)的font-size，會有一些組合的問題腹纳，而rem是相對于根節(jié)點(diǎn)（或者是html節(jié)點(diǎn)）痢掠，意思就是說你可以在html節(jié)點(diǎn)定義一個單獨(dú)的字體大小驱犹，然后所有其他元素使用rem相對于這個字體的百分比進(jìn)行設(shè)置
我們來看一個簡單的代碼實(shí)例：
html { font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body { font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
我在根元素中定義了一個基本字體大小為62.5%（也就是10px嘲恍。設(shè)置這個值主要方便計(jì)算，如果沒有設(shè)置雄驹，將是以“16px”為基準(zhǔn) ）佃牛。從上面的計(jì)算結(jié)果，我們使用“rem”就像使用“px”一樣的方便医舆，而且同時解決了“px”和“em”兩者不同之處俘侠。
如果你習(xí)慣了使用px作為測量單位而又希望可以使用到rem 這種相對單位的話 , 那么我們可以做一個簡單的mixin：
@base-font: 12px;
@mixin font-size(@font-size){
font-size: @font-size;
font-size: (@font-size/@base-font-size)*1rem;
}
li { font-size(10px); }
關(guān)于兼容性的考慮
rem 是CSS3新引進(jìn)來的一個度量單位，大家心里肯定會擔(dān)心瀏覽器的支持情況蔬将。其實(shí)支持的瀏覽器還是蠻多的爷速，比如：Mozilla Firefox 3.6+、Apple Safari 5+霞怀、Google Chrome惫东、IE9+和Opera11+。只是可憐的IE6-8不支持毙石。不過使用單位設(shè)置字體廉沮，可不能完全不考慮IE了，如果你想使用這個REM徐矩，但也想兼容IE下的效果滞时，可你可考慮“px”和“rem”一起使用，用”px”來實(shí)現(xiàn)IE6-8下的效果滤灯，然后使用“Rem”來實(shí)現(xiàn)代瀏覽器的效果坪稽。
