另外一個流動布局關(guān)注的常見問題是：文本要么伸展要么擠壓以致失去了可讀性。下面的這張圖片表明了這個問題，無論是在大屏幕還是在小屏幕上都是一樣，在小屏幕上似乎問題更大--文本間隙太大，上面這些情況都令用戶沮喪。

　　有一個辦法可以解決這個問題-- min-width和max-width，但有兩個問題：

　　不是所有的瀏覽器都支持min-width和max-width;

　　布局中只是部分借助于固定寬度，我們再一次全面失去了靈活性。

　　幸運(yùn)的是，James在Tinned Fruit 上創(chuàng)建了一個腳本，對此沒人提出異議。

　　什么是文本縮放?

　　用他的話說：“文本縮放”就是可以針對用戶屏幕的寬度自動調(diào)整文本的javascript，屏幕寬一點(diǎn)，字體就大一點(diǎn)。同樣，屏幕小一點(diǎn)，字體就小一些。除了這個基本功能外，設(shè)計者可以設(shè)置字體最小最大值，這樣用戶就不會看到任何古怪的文字。

　　要看實(shí)際效果，可以到他的Text Zooming page. 頁。正如你所看到的那樣，腳本很好的退化，在較大分辨率屏幕上大文本容易閱讀，就像在小屏幕上小文本易于閱讀一樣。更重要的是，標(biāo)題和導(dǎo)航并不改變大小，所以元素可以決定那個元素應(yīng)當(dāng)使用文本縮放。

　　上面是頁面最大化顯示較大文本的比例

　　上面是相同的頁面，只是將寬度減小到700px，字體大小隨瀏覽器改變

　　如何實(shí)現(xiàn)文本縮放

　　文本縮放是一個可以包含在網(wǎng)頁外部的基本的javascript，下載js文件，并進(jìn)一步閱讀說明，將其放到演示頁的頭部：Text Zooming。

　　在下面的外部的script文件中，插入代碼和修改它很容易。

　　結(jié)論

　　所有這些技巧可以實(shí)現(xiàn)融到一個設(shè)計之中去創(chuàng)造一個非常友好的流動布局。流動網(wǎng)格智能運(yùn)用可創(chuàng)建一個自適應(yīng)布局，其比例忠實(shí)于三等分法、平和和其它設(shè)計原則;自適應(yīng)技術(shù)通過個性化定義處理分辨率大小的異常。因此，設(shè)計師一定要為用戶提供完美的外觀，第三個技巧能很好的保證圖像和其它設(shè)定寬度的內(nèi)容區(qū)域在屏幕上不會太大。

　　我們希望，先進(jìn)的流動布局將是版面設(shè)計中的一個新時代，隨著各種寬度屏幕的出現(xiàn)這些技術(shù)獲得重視只是一個時間問題。

　　更多資源

　　Fluid Grids

　　Switchy McLayout: An Adaptive Layout Technique

　　Dynamic Resolution Dependent Layouts

　　Automatic Magazine Layout

　　In Search of the Holy Grail

　　Variable Fixed-Width Layout

　　CSS Drop-Column Layout

　　作者：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)格 ,翻譯不足之處，請斧正，謝謝。

最新評論