首先，本文所討論的「坑」是在做回應式網頁設計( responsive web design 以下簡稱 rwd）時顯現的，如果你還只是在做傳統的web設計這算不上是乙個坑，因為傳統的web頁面是死的，不會自動調節不能適應各類裝置螢幕尺寸自然不會產生任何尺寸變化的問題。相反地，要為不同裝置上的使用者提供最好的閱讀或使用體驗我們不可避免的就是對元素或字型的尺寸的測量與控制。由其是字型的尺寸，不知道你是否有以下的經歷
同樣的乙個網頁，同乙份樣式表，但：
如果不幸地被言中，那麼真得好好檢查一下樣式表的字型尺寸單位與行高所使用的單位是否正確了。在css3中我們可以應用很多的字型單位，如： pt, px, em, rem 和百分比（這裡只討論字型單位，對於vw / vh這類元素長度單位不在此討論範疇），這些單位的具體含義是什麼，在什麼場合使用，選擇哪個單位在rwd中最為適合呢 ？那麼就先來乙個乙個地去了解它們的意義與用法再對具體應用作出選擇。
pt是point(磅)縮寫，是一種固定長度的度量單位,大小為1/72英吋。如果在web上使用pt做單位的文字，字型的大小在不同螢幕（同樣解析度）下一樣，這樣可能會對排版有影響，但在word中使用pt相當方便。因為使用word主要目的都不是為了螢幕瀏覽，而是輸出列印。當列印到實體時，pt作為乙個自然長度單位就方便實用了：比如word中普通的文件都用「宋體 9pt」，標題用「黑體 16pt」等等，無論電腦怎麼設定，列印出來永遠就是這麼大。
可見如果將pt作為web上的首選字型單位那就是乙個大坑！pt只適用於列印與普通文件文字排版並不適用於web.
根據顯示器的解析度來確定長度，在老式web應用中多採用該單位；畫素是相對於顯示器螢幕解析度而言的。譬如，wondows的使用者所使用的解析度一般是96畫素/英吋。而mac的使用者所使用的解析度一般是72畫素/英吋。
兩種關係：一英吋=72pt(點)=96px(畫素)，網頁中最常用到的：9pt=12px
px本身是乙個極大的坑，也是最多人願意跳進去的。相對於同一解析度的螢幕它是乙個具體準確的測量單位，我們用做向量圖也最喜歡使用這個單位（px值是絕對值）， 所有的瀏覽器也是預設使用px來作為尺寸的測量單位，因此在網頁設計時都會將px作為標準的尺寸單位使用。當沒有互動移連網時代，沒有rwd之前這是乙個正確的選擇，但時代變了px並不能適用於可變字型尺寸的場景，使用它會產生排版的變形。
畫素單位會因螢幕解析度變化而變型，不適於用作在各種裝置上顯示的網頁的首選尺寸單位。
em 是乙個相對于父節點尺寸的相對長度單位，可以理解為字型尺寸的百分比單位，但與百分比不同的是 em是有預設常量值的，當不明確指定父節點字型尺寸時，任意瀏覽器的預設字型高（line-height）都是16px。所以未經調整的瀏覽器都符合: 1em=16px ， 那麼12px=0.75em, 10px=0.625em。這是乙個極為常用的換算公式。 em 是最適用於rwd的一種標準字型尺寸，支援字型放縮，可根據螢幕解析度以及不同瀏覽器間的顯示差異作出微調，確保字型在不同的裝置上，保持視覺與設計的一至性。值得注意的是，既然是相對單位就必定有參照物（元素），如果參照物不存在側採用16px作為真實尺寸。以此理論我們就可以為我們的站點的樣式表的最開始部分加上以下的**：
html body h1
如果我們想將1em=16px這個預設規則改變的話，如將1em=12px可以寫成這樣：
html body h1
如果我們希望在桌面顯示的字型更為精細，而在移動裝置上顯示的字型可更為清晰的話也可以這樣來寫：
html @media only screen and (max-device-width: 480px) }
以上是舉出最簡單的例子以幫助我們理解em的用法，而在實際應用中則需要解決另一方面的問題：預設元素樣式。各種瀏覽器對不同的標準元素有不同的預設樣式，由其是字型。如果要保持字型的一至性就需要在樣式表中明確地重寫這些樣式以保證瀏覽器間的相容性。如：li 的字型會按照ul的字型尺寸計算相對的大小：
html body li
css3引入新的字型尺寸單位 rem ，可以簡單記憶為root rm。
css3的出現，他同時引進了一些新的單位，包括我們今天所說的rem。在w3c官網上是這樣描述rem的——「font size of the root element」 。下面我們就一起來詳細的了解rem。
em單位是相對于父節點的font-size，會有一些組合的問題，而rem是相對於根節點（或者是html節點），意思就是說你可以在html節點定義乙個單獨的字型大小，然後所有其他元素使用rem相對於這個字型的百分比進行設定
我們來看乙個簡單的**例項：
html body h1
我在根元素中定義了乙個基本字型大小為62.5%（也就是10px。設定這個值主要方便計算，如果沒有設定，將是以「16px」為基準 ）。從上面的計算結果，我們使用「rem」就像使用「px」一樣的方便，而且同時解決了「px」和「em」兩者不同之處。
如果你習慣了使用px作為測量單位而又希望可以使用到rem 這種相對單位的話 , 那麼我們可以做乙個簡單的mixin：
@base-font: 12px;@mixin font-size(@font-size)li
CSS 天坑 I 字型單位
首先，本文所討論的 坑 是在做回應式網頁設計 responsive web design 以下簡稱 rwd 時顯現的，如果你還只是在做傳統的web設計這算不上是乙個坑，因為傳統的web頁面是死的，不會自動調節不能適應各類裝置螢幕尺寸自然不會產生任何尺寸變化的問題。相反地，要為不同裝置上的使用者提供最...
CSS單位（字型）
px px畫素 pixel 相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。emem是相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。引自css2.0手冊 任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合 1em...
css字型單位
了解 首先先了解四個字型單位 px em pt rem px 單位名稱為畫素，相對長度單位，畫素 px 是相對於顯示器螢幕解析度而言的，國內推薦 em 單位名稱為相對長度單位。相對於當前物件內文字的字型尺寸，國外使用比較多 pt 全稱為point，但中文不叫 點 確切的說法是乙個專用的印刷單位 磅 ...