|
秦歌(YanKaven) 的站點：http://dancewithnet.com/
今天是 Firefox3的2008下載日 ，這就意味著Firefox3正式發(fā)布了。Firefox3有眾多的改進(jìn)和新功能，我最關(guān)注的功能之一是 “全頁面縮放（Full page zoom）” 。這就意味著Firefox3和Opera以及IE7+都可以讓用戶“完全控制顯示內(nèi)容的大小同時自動調(diào)整頁面布局和結(jié)構(gòu)”，說白了就是可以讓整個頁面直接放大或縮小卻不會亂掉。這就意味著我們不用再考慮為了可訪問性而整個頁面是基于字體大�。╡m）的布局了。
在CSS中，有兩種單位。一種是絕對長度單位，包括英寸(in)、厘米(cm)、毫米(mm)、點(pt)和派卡(pc)。另一種是相對長度單位，包括em、ex和像素(px)。ex由于在實際應(yīng)用中需要獲取x大小，因瀏覽器對此處理方式非常粗糙而被拋棄(更多內(nèi)容可以參考Eric A. Meyer的《CSS權(quán)威指南》)，所以現(xiàn)在的網(wǎng)頁設(shè)計中對大小距離的控制使用的單位是em和px（當(dāng)然還有百分?jǐn)?shù)值，但它必須是相對于另外一個值的）。
在css中，1個“em”定義為一種給定字體的font-size值。所以1em可能隨元素的不同而不同，它會相對于父元素字體大小而改變。在常見瀏覽器下，默認(rèn)字體的大小為16px。常見有兩種方法來進(jìn)行網(wǎng)頁設(shè)計：
- 設(shè)置默認(rèn)字體大小為10px：
body{font-size:62.5%;}
#wrapper{width:97.4em;}
這便于依次計算出其他元素的長寬值，比如某個容器#wrapper的寬度是974px，CSS中定義為97.4em。本站隨網(wǎng)之舞就是依據(jù)這種方式來實現(xiàn)的。
- 設(shè)計默認(rèn)字體大小為網(wǎng)頁中最常用字體的大小，比如最常用字體的大小是12px：
body{font-size:75%;}
#wrapper{width:81.1667em;}
這樣雖然省去了設(shè)置默認(rèn)字體的大小，但是偶爾卻為嚴(yán)格尺寸設(shè)計帶來麻煩，比如你要設(shè)置那個寬為974px的容器#wrapper就會遇到此類麻煩。其實第一種方法也會遇到類似麻煩，只不過比第二種少些。
基于字體大小的設(shè)計好處很明顯，當(dāng)用戶調(diào)整瀏覽器默認(rèn)字體的大小時，字體和頁面會隨之縮放，能夠滿足挺這種方法的人常說的一個優(yōu)點就是弱視的人可以通過放大字體來看清楚頁面內(nèi)容，增強(qiáng)了頁面的可訪問性。
每個屏幕都有分辨率，比如1280×1024分辨率時屏幕就有1280×1024個點，這每個點就是一個像素(px)。所以利用px來設(shè)計網(wǎng)頁，不存在em那種相對于父元素字體大小變化而變化的問題。而實際上絕大部分的站點設(shè)計都是基于px設(shè)計的。在Windows平臺下IE7之前都無法通過調(diào)整瀏覽器中的“字體大小”來調(diào)整文本大小，非IE瀏覽器可以，但實際上是一般基于px的頁面，一旦僅僅調(diào)整了文本大小頁面就會亂掉（在Firefox 2下觀看除中國雅虎外的門戶網(wǎng)站，調(diào)整一下字體大小就了解了）。
為了IE下不能調(diào)整以px為單位的字體大小，而非IE下可以的問題，YUI CSS Tools采用了如下代碼來設(shè)置默認(rèn)1em的大小，支持用戶的字體大小調(diào)整：
body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
為此IE默認(rèn)情況下，1em的大小是13.3333px，所以你會看到Y(jié)UI CSS Grids里面那些諸如width:73.076em;這樣的值。
所以，基于字體大小（em）的設(shè)計和基于px的設(shè)計相比而言：
- 基于字體大小(em)的設(shè)計頁面帶來的縮放效果有限，最早基于字體大小設(shè)計的門戶網(wǎng)站應(yīng)該就是Yahoo和MSN了，而實際上它們也僅僅是保證了上下縮放三級而已，再多就亂掉了。
- 現(xiàn)在的站點越來越多的圖文混排，圖像的高度和寬度本身就是像素數(shù)。除非你通過CSS來把圖片的大小設(shè)置為相應(yīng)的em值，就像本站的Logo這樣，否則圖片是不會隨著文字變化而變化的。但是如果采用的是背景圖片，那就基本上無計可施了。所以實際上基于字體大小來做圖文混排設(shè)計的網(wǎng)頁需要對圖像的設(shè)計是有相當(dāng)嚴(yán)格的要求的，即使如此仍無法完美解決，但復(fù)雜度卻上升不少。
- 基于字體大小的網(wǎng)頁設(shè)計，將使長度變得的非常的不直觀，導(dǎo)致設(shè)置一個寬度變得非常麻煩，YUI CSS Grids中說明了這點。并且由于em會相對于父元素字體大小變化而變化的問題，導(dǎo)致圖文混排的復(fù)雜設(shè)計時非常麻煩。特別是在盛行過度設(shè)計和精確到像素的這個浮躁時代。其實連Google和百度這種非常簡單的首頁都或多或少的利用px來布局。
現(xiàn)在主流瀏覽器都支持了“全網(wǎng)頁縮放”功能，Safari尚未支持這個功能，而是像Firefox2一樣支持文本縮放，但是具有諷刺意味的是Apple頁面基本上都是基于px的，所以一縮放就亂掉，我深信Safari支持這個功能僅僅是時間問題。兩年前有篇《95%的中國網(wǎng)站需要重寫CSS》很流行，雖然保證用戶的可訪問性是應(yīng)該的，但是應(yīng)該找到其最佳實現(xiàn)的方法，毫無疑問瀏覽器的“全頁面縮放”功能是最佳選擇。從現(xiàn)在開始，基于px的設(shè)計不用再過于背負(fù)違背可用性的惡名了，基于em（文字大小）的設(shè)計不能給我們帶來太多的好處，反而有可能耗費太多的精力掙扎于如何精確保護(hù)視覺設(shè)計上，設(shè)計師的精力應(yīng)該更多的放在內(nèi)容的理解、快速呈現(xiàn)、語義化、對屏幕閱讀器的支持等等方面上。
全球范圍內(nèi)IE6已經(jīng)不到40% 了，中國用戶比率應(yīng)該高些，但趨勢是一樣的，畢竟IE8都出Beta了，IE6會很快成為歷史的。如果你是偏執(zhí)狂，需要考慮Firefox2和Safari的話，或許設(shè)置body{font-size:10px;}是一個不錯的辦法，中國雅虎的首頁就是利用類似原理。總之，是時候不用考慮基于字體大小（em）的設(shè)計了，特別是針對IE6的解決方案。
原文：http://dancewithnet.com/2008/06/17/
本文鏈接：http://www.95time.cn/tech/web/2008/5886.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
