作者：Patrick Griffiths轉貼自：onestab
原作: Patrick Griffiths
原文出自：A List Apart中文翻譯：onestab [04.01.25]
要從固定的、基于像素的設計方法轉到彈性的、相對的設計方法并不容易。但是如果恰當利用，可以成為增強親和力和易用性的一個自然選擇，同時又無須做出設計上的犧牲。
像素是計算機屏幕上的不可縮放的點，而一個 em 是一個字大小的方塊。由于字體大小的變化， em 代表用戶喜歡的文字大小的相對單位。
采用印刷式的固定設計方案或許要容易些，因為如果尺寸不變，則考慮的東西相對較少。可是如果采用彈性的設計方法，可以充分利用電腦的顯示器和瀏覽器。
也許你想你的網站以某種特定的方式顯示，但是你的用戶想看到的可能不一樣。任何強加于用戶的東西都不利于易用性，從而對網站的成功造成損害。
為了理解彈性設計，我們必須首先來看看一個似乎與此無關的問題 - 指定文字大小的幾種方式。 彈性文本
顯然文字是最容易實現(xiàn)的彈性設計的。能夠設定喜歡的文字大小是用戶最常見的要求，因此不可忽視。
親和力指的并不只是關于盲人和屏幕閱讀器。還有許多人雖然不是盲人，但是有視力障礙 - 你我變老時會成為他們的一員。使網站變得更具親和力的一個最簡單的方法是允許用戶改變文字大��；拒絕提供這樣的選擇剝奪了用戶的主導權，很可能使用戶無法舒適地閱讀。
如果設計者使用像素為單位指定文字大小，大多數(shù)的用戶將無法縮放文字，因為 Internet Explorer 改變文字大小的方式與別的瀏覽器不同。Mozilla 和 Opera 可以縮放已經設定像素大小的文字，而Windows 下的IE卻不能。 em 存在的問題
Em 似乎是進行文字相對大小設定時的單位，瀏覽器默認的文字高度是16像素，對大多數(shù)設計者來說太大了，不合他們的口味。要使用 em，設計者一般將文字的初始大小設為小于 1em。
例如：body { font-size: 0.8em; }h1 { font-size: 2em; }p { font-size: 1em; }
看起來似乎可行，但有一個問題 - 如果你在 IE 中將“文字大小”設為“較小”或“最小”，文字會小得難以閱讀。由于 IE 如此普及， em 似乎不是可行的選擇。
Jeffrey Zeldman過去曾經對此表示質疑，他認為盡管有其不利之處，以像素指定文字大小還是比用 em 好。這個結論是根據(jù) Owen Briggs 所作的深入研究得出的。 Owen Briggs 測試了264種不同的文字縮放方法并演示了 em 之類的相對單位行不通。許多設計人員現(xiàn)在都用像素為單位指定文字大小，不是出于控制網頁外觀的需要，而是似乎沒有更為合理的其他選擇。
如此看來，要么是難看的大字體，要么無法縮放，好像無法兩全。別著急，接著讀下去。 另一種“大字體”后備樣式
在與無法縮放的像素所帶來的親和力問題的戰(zhàn)斗中，許多作者在他們的網頁上使用了一種后備樣式表的技術，可通過網頁上的一個鏈接進行切換。
這種方法固然不錯，但是如果和相對文字大小的措施（比如Wired News所提到的）一起使用，效果會更好。不能指望用戶熟悉你的特有界面，用戶一般對瀏覽器的界面更為熟悉，如果他們想看大一點的字體，更傾向于用瀏覽器來達到而不是用你的界面。而且他們更期望這種方法在各個網站都管用，不想每訪問一個網站都改變一次。，比如Wired News CSS 關鍵詞
Font-size 的關鍵詞(xx-small, medium, x-large,等等)好像是答案。在 IE 中，當用戶選擇“較大”或“”時文字會變大，選擇“較小”或“最小”時文字會變小，一直到合適的大小。與其他的彈性設計方法不同，使用關鍵字的好處是當對文字進行縮放時，永遠不會使文字實際像素大小低于某個值，所以無論用戶如何選擇文字大小，都應當有良好的可讀性。
在 ALA 的其他地方對關鍵字有更詳盡的解說，這種方法的的示例也許是你正在閱讀的這篇文章。（在最近一次的改版之前，ALA 使用了后備的“大字體”樣式切換，一個樣式表使用像素指定文字大小，另一個用的是基于關鍵字的相對大小方法。） 百分比使得 em 可行
Em 之所以可行是因為通過設定初始文字的百分比，可以很容易避免文字過小的問題。雖然其原理并非顯而易見，但的確可行。當采用這種方案時，IE 文字大小各檔設置之間的間隔不會顯得生硬，設計者可以設置初始文字大小，使得在“較小”和“最小”時仍然得到較好的可讀性。這樣有使 em 有了用武之地。（甚至于 Briggs 現(xiàn)在也更認同 em.）
例如：body { font-size: 80%; }h1 { font-size: 2em; }p { font-size: 1em; }
不用關鍵字而采用 em 的好處是你可以用 em 來指定全部布局的尺寸，它可以隨著文字的大小按比例縮放。 彈性布局
對設計者來說，比彈性字體更困難的是徹底的相對布局 - 如果用 em 來設定布局的尺寸事情容易了。
讓布局具有彈性，使之隨著用戶改變文字大小時自動適應，這好像有些多余甚至毫無必要。但是既然你讓文字可以伸縮，那么讓包容文字的布局也隨之伸縮也是順理成章的事。
另外，如果用戶選擇了較大的字體，則周圍的空間應當會隨之按比例增加，保持了“設計者”選擇的比例，使文章容易閱讀。
這種方案的另一個好處是可以避免不希望的文字換行。如果一個窄的欄目寬度以像素來定義，當其中的文字變大時，可能會打亂整個布局。采用文字大小比例來指定欄目寬度可避免這個問題。
關于該方案的一個例子請看 CSS Zen Garden 上的作品 Elastic Lawn。 太寬了！
將網頁的初始文字大小指定為 以后，在 IE 的“中等”字體下，36em 的寬度應該是 576 個像素（作為參考，ALA 的寬度為600個像素），在“”的字體下，36em 應當增加到 768 個像素（Windows 下 IE 6 的測試結果）。如果再大一點，在 800 像素寬的屏幕、“”號字體下可能會顯得太寬了。
CSS 對這個問題的解決方案是 max-width 屬性，它可以指定某個元素的寬度。不幸的是 Internet Explorer 不支持（不知有誰想過沒有？）。
另一個解決方案是采用流動式布局，也是說根本不指定內容區(qū)域的寬度，讓文字自然流動，充滿屏幕寬度（HTML Dog采用了這種方案）。許多人不接受這種方案，因為在寬屏幕下的可讀性不好，但對于移動設備這樣的小屏幕非常合適。
如果你準備采用彈性布局方案，在指定邊界或者位圖之類的由像素構成的對象時，仍然要以像素為單位，這可能會和基于文字大小關系發(fā)生沖突；但這不應成為不采用彈性布局的理由。 使圖形彈性化
用相對大小來設置位圖的尺寸會導致災難性的后果。對付這個問題可以這樣做 - 維持圖形原有的解析度不變，將它裁剪到合適的大小。
通過更換背景圖片可以可做到。這里是一個標題元素的例子，你也可以采用其他的圖片替換技術： h1 { font-size: 1em; width: 10em; height: 100px; text-indent: -1234em; background-image: url(whatever.jpg); }
或者（正如hebig.org 和 v-2.org所做的那樣），你可以將圖片包含在一個容器，比如一個有下面樣式的 DIV 中: div { width: 10em; overflow: hidden; }
本文中提到的許多彈性設計方法都可以在demonstration page 中看到。 討論
覺得本文對你有用嗎？ 請參與本文的討論。
Patrick Griffiths 是一位倫敦的自由Web設計師，愛好抒情音樂、改進和漫游他的網站寵物，HTML Dog。他有時更喜歡用 PTG 的昵稱，這要看他當時的心境。