em與px

< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd>

很長一段時間，我都使用12px作為網站的主要字型大小。10px太小，眼睛很容易疲勞，14px雖容易看清，卻破壞頁面的美感。唯獨12px在審美和視力方面都恰到好處。

誰對我的網站字型大小有意見？

我老爸，他是第一個向我反映看不清我的網站文字的人。這使我意識到12px，其實隻是讓我覺得很不錯而已，而對于那些視力下降明顯的中年以上的人來講，幾乎等于10px對于我的感覺。

于是我告訴他，在“檢視”裡調整“文字大小”就可以了。但是卻發現這是徒勞的。在Firefox能輕易調整的字型大小，怎麼在IE就變得如此”堅不可調“？

問題出在哪？

關鍵點：

1. IE無法調整那些使用px作為機關的字型大小；

2. 國外的大部分網站能夠調整的原因在于其使用了em作為字型機關；

3. Firefox能夠調整px和em，但是96%以上的中國網民使用IE浏覽器(或核心)。這意味這中國網站的字型大小可以被認為不可調。

95%的中國網站需要重寫CSS

而在大洋彼岸，幾乎所有的主流站點都使用em作為字型機關，也就是可調的。

沒錯，px比em更加容易使用，我也敢打賭大部分讀者不知道em為何物或者它相當于多少px。

國外人士如此重視網站易用性(Accessibility)，不僅因為其根生蒂固的人文精神，直接原因可能是因為有一部法律來限制他們--例如美國的Section 508，強制網站達到一定的易用性。是以沒有哪個主流站點願意被那些視力下降或是殘缺的人告上法庭。

注: 在中國, 可能把微軟告上法庭來的更簡單點，為什麼IE對于px那麼死闆。

如何重寫你的網站CSS

em vs. px

em是何物？

em指字型高，任意浏覽器的預設字型高都是16px。是以未經調整的浏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。為了簡化font -size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變為16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說隻需要将你的原來的px數值除以10，然後換上em作為機關就行了。em有如下特點：

1. em的值并不是固定的；

2. em會繼承父級元素的字型大小。

重寫步驟：

1. body選擇器中聲明Font-size=62.5%；

2. 将你的原來的px數值除以10，然後換上em作為機關；

簡單吧，如果隻需要以上兩步就能解決問題的話，可能就沒人用px了。經過以上兩步，你會發現你的網站字型大得出乎想象。因為em的值不固定，又會繼承父級元素的大小，你可能會在content這個div裡把字型大小設為1.2em, 也就是12px。然後你又把選擇器p的字型大小也設為1.2em，但如果p屬于content的子級的話，p的字型大小就不是12px，而是1.2em= 1.2 * 12px=14.4px。這是因為content的字型大小被設為1.2em，這個em值繼承其父級元素body的大小，也就是16px * 62.5% * 1.2=12px, 而p作為其子級，em則繼承content的字型高，也就是12px。是以p的1.2em就不再是12px，而是14.4px。

3. 重新計算那些被放大的字型的em數值。避免字型大小的重複聲明，也就是避免以上提到的1.2 * 1.2= 1.44的現象。比如說你在#content中聲明了字型大小為1.2em，那麼在聲明p的字型大小時就隻能是1em，而不是1.2em, 因為此em非彼em，它因繼承#content的字型高而變為了1em=12px。

詭異的12px漢字(原因待查)

本人在完成em轉換時還發現了一個詭異的現象，就是由以上方法得到的12px(1.2em)大小的漢字在IE中并不等于直接用12px定義的字型大小，而是稍大一點。這個問題我已經解決，你隻需在body選擇器中把62.5%換成63%就能正常顯示了。原因可能是IE處理漢字時，對于浮點的取值精确度有限。閱讀本篇的讀者還有其他解釋嗎？

還可以做哪些改進

為什麼還需改進：

1. 你的網站css過于複雜，以至于不知道元素的從屬關系，很難重寫css；

2. 絕大部分人看了本文之後仍然不會重寫css；

3. 很大部分人不知道浏覽器可以調整頁面的字型大小。

是以你需要一個諸如本站資訊框中的字型大小調整控件。

Important reference:

本文轉自 netcorner 部落格園部落格，原文連結：http://www.cnblogs.com/netcorner/archive/2007/04/05/2912397.html  ，如需轉載請自行聯系原作者