|
二、自適應(yīng)內(nèi)容
該流動(dòng)設(shè)計(jì)另外一個(gè)常見問題是：盡管它們適應(yīng)很多分辨率的屏幕，但如果分辨率太小（如手機(jī)或PDA）或超大，看上去就有點(diǎn)滑稽了。在分辨率為240的PDA屏幕上一個(gè)三欄布局看起來非常混亂。
為了解決這個(gè)問題，我們可以使用一項(xiàng)技巧使內(nèi)容自適應(yīng)特定范圍的分辨率屏幕。幸運(yùn)的是，我們可以利用上面的技術(shù)來保持我們的比例，然后增加該項(xiàng)技術(shù)以得到更好的可用性。
自適應(yīng)內(nèi)容流動(dòng)布局
大多數(shù)流動(dòng)布局在分辨率為800×600的屏幕中看起來很大很寬－－高達(dá)1280px。但是，我們可以稍稍突破一下，針對800px－1024px、1024px－1280px、1280px以上的屏幕定制略微不同的布局。同樣，也可為640px－800px、320px－640px、240px－320px、240px以下的屏幕自定義調(diào)整。
The Man in Blue曾使用過這樣的技巧。
上面的例子有兩個(gè)單獨(dú)的樣式：一個(gè)針對分辨率超過800px的屏幕；一個(gè)針對分辨率小于800px的屏幕。
這種技巧用不同風(fēng)格的布局取更好的適應(yīng)不同分辨率的屏幕。Marc Van Den Dobblesteen’s layout example, Switchy McLayout 用這些樣式提供了一個(gè)完美的例子。
優(yōu)點(diǎn)
- 設(shè)計(jì)者可以更精確的看到，在不同分辨率屏幕下，其設(shè)計(jì)是什么樣子；
- 無論是在什么平臺(tái)上查看，其更好的遵守了間距和平衡的設(shè)計(jì)原則；
- 完美的處理了最小和最大分辨率。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 自適應(yīng)css布局——流動(dòng)布局新時(shí)代 [2] 下一頁 自適應(yīng)css布局——流動(dòng)布局新時(shí)代 [4]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 自適應(yīng)css布局——流動(dòng)布局新時(shí)代 [3]
