相關文章：css教程：簡單理解em

秦歌(yankaven)的站點：http://dancewithnet.com/

今天是 firefox3的2008下載日 ，這就意味著firefox3正式發布了。firefox3有眾多的改進和新功能，我最關注的功能之一是 “全頁面縮放（full page zoom）” 。這就意味著firefox3和opera以及ie7+都可以讓用戶“完全控制顯示內容的大小同時自動調整頁面布局和結構”，說白了就是可以讓整個頁面直接放大或縮小卻不會亂掉。這就意味著我們不用再考慮為了可訪問性而整個頁面是基于字體大小（em）的布局了。

在css中，有兩種單位。一種是絕對長度單位，包括英寸(in)、厘米(cm)、毫米(mm)、點(pt)和派卡(pc)。另一種是相對長度單位，包括em、ex和像素(px)。ex由于在實際應用中需要獲取x大小，因瀏覽器對此處理方式非常粗糙而被拋棄(更多內容可以參考eric a. meyer的《css權威指南》)，所以現在的網頁設計中對大小距離的控制使用的單位是em和px（當然還有百分數值，但它必須是相對于另外一個值的）。

在css中，1個“em”定義為一種給定字體的font-size值。所以1em可能隨元素的不同而不同，它會相對于父元素字體大小而改變。在常見瀏覽器下，默認字體的大小為16px。常見有兩種方法來進行網頁設計：

1. 設置默認字體大小為10px：
   body{font-size:62.5%;}
   #wrapper{width:97.4em;}
   這便于依次計算出其他元素的長寬值，比如某個容器#wrapper的寬度是974px，css中定義為97.4em。本站隨網之舞就是依據這種方式來實現的。
2. 設計默認字體大小為網頁中最常用字體的大小，比如最常用字體的大小是12px：
   body{font-size:75%;}
   #wrapper{width:81.1667em;}

這樣雖然省去了設置默認字體的大小，但是偶爾卻為嚴格尺寸設計帶來麻煩，比如你要設置那個寬為974px的容器#wrapper就會遇到此類麻煩。其實第一種方法也會遇到類似麻煩，只不過比第二種少些。

基于字體大小的設計好處很明顯，當用戶調整瀏覽器默認字體的大小時，字體和頁面會隨之縮放，能夠滿足挺這種方法的人常說的一個優點就是弱視的人可以通過放大字體來看清楚頁面內容，增強了頁面的可訪問性。

每個屏幕都有分辨率，比如1280×1024分辨率時屏幕就有1280×1024個點，這每個點就是一個像素(px)。所以利用px來設計網頁，不存在em那種相對于父元素字體大小變化而變化的問題。而實際上絕大部分的站點設計都是基于px設計的。在windows平臺下ie7之前都無法通過調整瀏覽器中的“字體大小”來調整文本大小，非ie瀏覽器可以，但實際上是一般基于px的頁面，一旦僅僅調整了文本大小頁面就會亂掉（在firefox 2下觀看除中國雅虎外的門戶網站，調整一下字體大小就了解了）。

為了ie下不能調整以px為單位的字體大小，而非ie下可以的問題，yui css tools采用了如下代碼來設置默認1em的大小，支持用戶的字體大小調整：

body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}

為此ie默認情況下，1em的大小是13.3333px，所以你會看到yui css grids里面那些諸如width:73.076em;這樣的值。

所以，基于字體大小（em）的設計和基于px的設計相比而言：

1. 基于字體大小(em)的設計頁面帶來的縮放效果有限，最早基于字體大小設計的門戶網站應該就是yahoo和msn了，而實際上它們也僅僅是保證了上下縮放三級而已，再多就亂掉了。
2. 現在的站點越來越多的圖文混排，圖像的高度和寬度本身就是像素數。除非你通過css來把圖片的大小設置為相應的em值，就像本站的logo這樣，否則圖片是不會隨著文字變化而變化的。但是如果采用的是背景圖片，那就基本上無計可施了。所以實際上基于字體大小來做圖文混排設計的網頁需要對圖像的設計是有相當嚴格的要求的，即使如此仍無法完美解決，但復雜度卻上升不少。
3. 基于字體大小的網頁設計，將使長度變得的非常的不直觀，導致設置一個寬度變得非常麻煩，yui css grids中說明了這點。并且由于em會相對于父元素字體大小變化而變化的問題，導致圖文混排的復雜設計時非常麻煩。特別是在盛行過度設計和精確到像素的這個浮躁時代。其實連google和百度這種非常簡單的首頁都或多或少的利用px來布局。

現在主流瀏覽器都支持了“全網頁縮放”功能，safari尚未支持這個功能，而是像firefox2一樣支持文本縮放，但是具有諷刺意味的是apple頁面基本上都是基于px的，所以一縮放就亂掉，我深信safari支持這個功能僅僅是時間問題。兩年前有篇《95%的中國網站需要重寫css》很流行，雖然保證用戶的可訪問性是應該的，但是應該找到其最佳實現的方法，毫無疑問瀏覽器的“全頁面縮放”功能是最佳選擇。從現在開始，基于px的設計不用再過于背負違背可用性的惡名了，基于em（文字大小）的設計不能給我們帶來太多的好處，反而有可能耗費太多的精力掙扎于如何精確保護視覺設計上，設計師的精力應該更多的放在內容的理解、快速呈現、語義化、對屏幕閱讀器的支持等等方面上。

全球范圍內ie6已經不到40% 了，中國用戶比率應該高些，但趨勢是一樣的，畢竟ie8都出beta了，ie6會很快成為歷史的。如果你是偏執狂，需要考慮firefox2和safari的話，或許設置body{font-size:10px;}是一個不錯的辦法，中國雅虎的首頁就是利用類似原理。總之，是時候不用考慮基于字體大小（em）的設計了，特別是針對ie6的解決方案。

原文：http://dancewithnet.com/2008/06/17/