|
六、文本縮放
另外一個(gè)流動布局關(guān)注的常見問題是：文本要么伸展要么擠壓以致失去了可讀性。下面的這張圖片表明了這個(gè)問題，無論是在大屏幕還是在小屏幕上都是一樣，在小屏幕上似乎問題更大－－文本間隙太大，上面這些情況都令用戶沮喪。
有一個(gè)辦法可以解決這個(gè)問題－－ min-width和max-width，但有兩個(gè)問題：
不是所有的瀏覽器都支持min-width和max-width；
布局中只是部分借助于固定寬度，我們再一次全面失去了靈活性。
幸運(yùn)的是，James在Tinned Fruit 上創(chuàng)建了一個(gè)腳本，對此沒人提出異議。
什么是文本縮放？
用他的話說：“文本縮放”就是可以針對用戶屏幕的寬度自動調(diào)整文本的javascript，屏幕寬一點(diǎn)，字體就大一點(diǎn)。同樣，屏幕小一點(diǎn)，字體就小一些。除了這個(gè)基本功能外，設(shè)計(jì)者可以設(shè)置字體最小最大值，這樣用戶就不會看到任何古怪的文字。
要看實(shí)際效果，可以到他的Text Zooming page. 頁。正如你所看到的那樣，腳本很好的退化，在較大分辨率屏幕上大文本容易閱讀，就像在小屏幕上小文本易于閱讀一樣。更重要的是，標(biāo)題和導(dǎo)航并不改變大小，所以元素可以決定那個(gè)元素應(yīng)當(dāng)使用文本縮放。
上面是頁面最大化顯示較大文本的比例
上面是相同的頁面，只是將寬度減小到700px，字體大小隨瀏覽器改變
如何實(shí)現(xiàn)文本縮放
文本縮放是一個(gè)可以包含在網(wǎng)頁外部的基本的javascript，下載js文件，并進(jìn)一步閱讀說明，將其放到演示頁的頭部：Text Zooming。
在下面的外部的script文件中，插入代碼和修改它很容易。
<script type="text/javascript">
var contentZoom = new TextZoom(
"Content", // Reference element
"Content", // Target element
0.22, // Zoom ratio
70, // Minimum font size (%)
130); // Maximum font size (%)
addLoadEvent(textZoomInit);
</script>
結(jié)論
所有這些技巧可以實(shí)現(xiàn)融到一個(gè)設(shè)計(jì)之中去創(chuàng)造一個(gè)非常友好的流動布局。流動網(wǎng)格智能運(yùn)用可創(chuàng)建一個(gè)自適應(yīng)布局，其比例忠實(shí)于三等分法、平和和其它設(shè)計(jì)原則；自適應(yīng)技術(shù)通過個(gè)性化定義處理分辨率大小的異常。因此，設(shè)計(jì)師一定要為用戶提供完美的外觀，第三個(gè)技巧能很好的保證圖像和其它設(shè)定寬度的內(nèi)容區(qū)域在屏幕上不會太大。
我們希望，先進(jìn)的流動布局將是版面設(shè)計(jì)中的一個(gè)新時(shí)代，隨著各種寬度屏幕的出現(xiàn)這些技術(shù)獲得重視只是一個(gè)時(shí)間問題。
更多資源
作者：Kayla Knigh
原文地址：Adaptive CSS-Layouts: New Era In Fluid Layouts?
譯文地址：http://www.denisdeng.com/?p=324
文章所涉及的圖片均來自http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/
附：《Fluid Grids》譯文本人已經(jīng)翻譯，有興趣者可參閱 流動網(wǎng)格 ,翻譯不足之處，請斧正，謝謝。
本文鏈接：http://www.95time.cn/tech/web/2009/6943.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 自適應(yīng)css布局——流動布局新時(shí)代 [7] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 8 頁 自適應(yīng)css布局——流動布局新時(shí)代 [8]
