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