今天是 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。常見有兩種方法來進行網頁設計:
這樣雖然省去了設置默認字體的大小,但是偶爾卻為嚴格尺寸設計帶來麻煩,比如你要設置那個寬為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的設計相比而言:
現在主流浏覽器都支持了“全網頁縮放”功能,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/