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