av网站免费线看精品_国产做a爱视频免费不_深爱激情网开心五月天_伊人五月天在线视频网

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