首先，本文所討論的“坑”是在做回應(yīng)式網(wǎng)頁設(shè)計( Responsive Web Design 以下簡稱 RWD）時顯現(xiàn)的，如果你還只是在做傳統(tǒng)的Web設(shè)計這算不上是一個坑，因為傳統(tǒng)的Web頁面是死的，不會自動調(diào)節(jié)不能適應(yīng)各類設(shè)備屏幕尺寸自然不會產(chǎn)生任何尺寸變化的問題。相反地，要為不同設(shè)備上的用戶提供最好的閱讀或使用體驗我們不可避免的就是對元素或字體的尺寸的測量與控制。由其是字體的尺寸，不知道你是否有以下的經(jīng)歷
同樣的一個網(wǎng)頁，同一份樣式表，但：
- 字體在mac 上很漂亮，但在windows很難看 ？
- 文字在PC上位置正確，但在iPad上卻錯了位 ？
- 文字塊在Chrome上長度適合，但換了FireFox卻變長了，甚至換了行 ？
如果不幸地被言中，那么真得好好檢查一下樣式表的字體尺寸單位與行高所使用的單位是否正確了。在CSS3中我們可以應(yīng)用很多的字體單位，如： pt, px, em, rem 和百分比（這里只討論字體單位，對于vw / vh這類元素長度單位不在此討論范疇），這些單位的具體含義是什么，在什么場合使用，選擇哪個單位在RWD中最為適合呢 ？那么就先來一個一個地去了解它們的意義與用法再對具體應(yīng)用作出選擇。
點陣單位（pt）
PT是point(磅)縮寫，是一種固定長度的度量單位,大小為1/72英寸。如果在web上使用pt做單位的文字，字體的大小在不同屏幕（同樣分辨率）下一樣，這樣可能會對排版有影響，但在Word中使用pt相當(dāng)方便。因為使用Word主要目的都不是為了屏幕瀏覽，而是輸出打印。當(dāng)打印到實體時，pt作為一個自然長度單位就方便實用了：比如Word中普通的文檔都用“宋體 9pt”，標(biāo)題用“黑體 16pt”等等，無論電腦怎么設(shè)置，打印出來永遠(yuǎn)就是這么大。
可見如果將pt作為Web上的首選字體單位那就是一個大坑！pt只適用于打印與普通文檔文字排版并不適用于Web.
像素單位 （px）
根據(jù)顯示器的分辨率來確定長度，在老式web應(yīng)用中多采用該單位；像素是相對于顯示器屏幕分辨率而言的。譬如，WONDOWS的用戶所使用的分辨率一般是96像素/英寸。而MAC的用戶所使用的分辨率一般是72像素/英寸。
兩種關(guān)系：一英寸=72pt(點)=96px(像素)，網(wǎng)頁中最常用到的：9pt=12px
px本身是一個極大的坑，也是最多人愿意跳進去的。相對于同一分辨率的屏幕它是一個具體準(zhǔn)確的測量單位，我們用做矢量圖也最喜歡使用這個單位（px值是絕對值）， 所有的瀏覽器也是默認(rèn)使用px來作為尺寸的測量單位，因此在網(wǎng)頁設(shè)計時都會將px作為標(biāo)準(zhǔn)的尺寸單位使用。當(dāng)沒有互動移連網(wǎng)時代，沒有RWD之前這是一個正確的選擇，但時代變了px并不能適用于可變字體尺寸的場景，使用它會產(chǎn)生排版的變形。
像素單位會因屏幕分辨率變化而變型，不適于用作在各種設(shè)備上顯示的網(wǎng)頁的首選尺寸單位。
相對長度單位 （em）
em 是一個相對于父節(jié)點尺寸的相對長度單位，可以理解為字體尺寸的百分比單位，但與百分比不同的是 em是有默認(rèn)常量值的，當(dāng)不明確指定父節(jié)點字體尺寸時，任意瀏覽器的默認(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è)計的一至性。值得注意的是，既然是相對單位就必定有參照物（元素），如果參照物不存在側(cè)采用16px作為真實尺寸。以此理論我們就可以為我們的站點的樣式表的最開始部分加上以下的代碼：
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的用法，而在實際應(yīng)用中則需要解決另一方面的問題：默認(rèn)元素樣式。各種瀏覽器對不同的標(biāo)準(zhǔn)元素有不同的默認(rèn)樣式，由其是字體。如果要保持字體的一至性就需要在樣式表中明確地重寫這些樣式以保證瀏覽器間的兼容性。如：li 的字體會按照ul的字體尺寸計算相對的大?。?/p>
html { font-size: 75%; // 12px }
body { font-size: 1em; // 12px }
li { font-size: 0.833em; // 10px }
當(dāng)然<button/>, <h1>~<h6>, <summary/>, <detail> 等還有很多的元素都需要進行這個標(biāo)準(zhǔn)化的過程，如果覺得這個工作很麻煩也可以去下載著名的 normalize.css 樣式表完成這個重置工作，雖然看起來很麻煩，但是這卻可以避免在整個項目設(shè)計的過程中掉入這些由于尺寸所帶來的不必要而耗時的調(diào)整。
相對根節(jié)點長度單位 （rem）
CSS3引入新的字體尺寸單位 rem ，可以簡單記憶為root rm。
CSS3的出現(xiàn)，他同時引進了一些新的單位，包括我們今天所說的rem。在W3C官網(wǎng)上是這樣描述rem的——“font size of the root element” 。下面我們就一起來詳細(xì)的了解rem。
em單位是相對于父節(jié)點的font-size，會有一些組合的問題，而rem是相對于根節(jié)點（或者是html節(jié)點），意思就是說你可以在html節(jié)點定義一個單獨的字體大小，然后所有其他元素使用rem相對于這個字體的百分比進行設(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è)置這個值主要方便計算，如果沒有設(shè)置，將是以“16px”為基準(zhǔn) ）。從上面的計算結(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新引進來的一個度量單位，大家心里肯定會擔(dān)心瀏覽器的支持情況。其實支持的瀏覽器還是蠻多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可憐的IE6-8不支持。不過使用單位設(shè)置字體，可不能完全不考慮IE了，如果你想使用這個REM，但也想兼容IE下的效果，可你可考慮“px”和“rem”一起使用，用”px”來實現(xiàn)IE6-8下的效果，然后使用“Rem”來實現(xiàn)代瀏覽器的效果。
