em、pt、px和百分比

瀏覽器默認的字體大小為100%=16px=12pt=1em

px像素（Pixel）：是固定大小的單元。相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。一個像素等於電腦屏幕上的一個點（是你屏幕分辨率的最小分割）。像素單元的一個問題是，它沒有為視障讀者的擴展，以適應移動設備。

點（pt）：通常用於印刷媒體（任何打印在紙上的媒體，等等）。一個點等於一英寸的1/72。點跟像素，他們是固定大小的單位，不能伸縮。

em（Ems）：是相對長度單位，是一個可伸縮的單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸。

百分比（%）：百分比單位更像“em”單位,除了一些根本性的差異。首先,當前的字體大小等於100%(比如12 pt = 100%)。當使用百分比單位,你的文字在移動設備上仍然保持完全的可伸縮性和可訪問性。

em跟%的區別：

當用戶設置網頁字體“Smallest”或者“Largest”的時候，em比%顯示地更大。即當真正去擴展時，在實際應用程序中，em文本尺寸變化太大，在一些客戶端機器上最小的文本變得不是很清晰。

 

使用px的弊端：

ie瀏覽器“查看→文字大小”時設置不起作用，影響用戶體驗。即IE無法調整那些使用px作單位的字體大小。

firefox可以調整px和em？表示懷疑 經測試也不支持px。在“工具→選項”里面調整字體大小

chorome經測試也不支持px。在“設置→顯示高級設置”里面設置字體大小

 

瀏覽器字體重置：

因為瀏覽器默認字體大小100%是16px=1em。所以要設置10px=1em的時候只要重置字體百分比為10/16=62.5%。這樣，10px=1em; 12px只要寫成1.2em即可

但IE瀏覽器在處理漢字時，對於浮點的取值精確度有限，在body下62.5%比直接定義的字體要大一點點，因此ie中 *font-size:63%即可。

注意：em和%會繼承父級元素的字體的大小。

所以若最外層div為

/*font-size*/
.fz { font-size: 1.2em; }

本應該，14px=1.4em，但因為瀏覽器字體的繼承性

<div class="fz">
    字體大小12px
    <div style="font-size: 1.4em">
        字體大小font-size: 1.4em
    </div>
</div>
<div style="font-size: 1.4em">
    字體大小font-size: 1.4em
</div>

so,

/*font-size*/
.fz { font-size: 1.2em; }

.fz button, .fz input, .fz select, .fz textarea, .fz option { font-size: 1em; }

.fz14, input.fz14 { font-size: 1.17em; }

.fz16 { font-size: 1.33em; }

.fz18 { font-size: 1.5em; }

.fz20 { font-size: 1.67em; }

.fz24 { font-size: 2em; }