|
在我的另一篇文章《彈性+固寬布局》中，我介紹了彈性加最小固定寬度的一種布局方案，現(xiàn)在介紹另一種布局方案---彈性流體布局。
那種方案其實就是這種布局的變通應(yīng)用。彈性布局最大的優(yōu)點就是能充分利用屏幕空間。無論客戶端分辯率多大，都能自動適應(yīng)寬度的變化。
圖一
看看上面這幅圖片，這是國外的一個網(wǎng)站，它本身是固定寬度布局的，我們的布局就以這幅圖為基礎(chǔ)來講解的。當(dāng)然，我不會全面介紹如何制作這個完整頁面，我只針對重點做一下講解。
其實做一個彈性布局，相對來說是比較簡單的，但是這種布局雖簡單，可是對于細(xì)節(jié)上的把握才是這種布局的精髓。彈性布局雖說有這么好的優(yōu)點，可是卻有比較致命的缺陷：
- 如果不對這種布局設(shè)置一個最小寬度，當(dāng)用戶縮小窗口到足夠小時，會對布局產(chǎn)生致命的影響。造成嚴(yán)重影響布局錯位。
- 當(dāng)一個頁面彈性布局時，對于里面的圖片會產(chǎn)生巨大的影響。因為到目前為至，還沒有解決圖片隨百分比縮放的問題。
所以這篇文章對于布局的講解可能還相對少些，而更多的是解決上面的兩個問題，我相信只要解決了上面的兩個問題，這種布局相對來說就容易多了。
一、解決最小寬度
一般彈性布局都是利用百分比來設(shè)置一個容器的寬度。這樣就能自動適應(yīng)屏幕的寬度了。但是寬度值不能完全由用戶自由縮放，我們必須在這個百分比寬度限制其最小寬度，當(dāng)用戶縮小窗口到一定值，就不讓窗口再縮放了。
熟悉CSS的朋友都知道，有這樣四個屬性：
- Min-width:最小寬度
- Max-width:最大寬度
- Min-height:最小高度
- Max-height:最大高度
這四個屬性剛好能解決這個問題，是不是比較欣喜，可是，別忙，雖說它們能解決這個問題，可是卻有一個嚴(yán)重的問題，用戶使用最多的瀏覽器IE6卻不支持這幾個屬性，這是一件非常糟糕的事情。我們總不能丟棄用戶最多的瀏覽器吧！
目前網(wǎng)上比較流行的有四種方法來解決讓IE6支持這四種屬性：
- 在CSS中expression來設(shè)置最小寬度，比較費內(nèi)存。
- 用嵌套DIV,然后用margin偏移模仿實現(xiàn)，多冗余結(jié)構(gòu)。
- 用JQ框架實現(xiàn)，為一個屬性加一個JS框架，有點不劃算。
- 用純JS代碼實現(xiàn)。
前面三種都有劣勢，請各自選擇最合適的方法，我偏重于最后一種，這是國外的一個牛人實現(xiàn)的，相關(guān)例子可以看這兒：http://www.doxdesk.com/software/js/minmax.html
有了這個JS文件，你只需要在頭部調(diào)用這個JS文件就可以了。
PS:在演示模型中為了方便，我將這個JS作為內(nèi)部引用的方式調(diào)用，你們在實際應(yīng)用中將這個JS文件新建為一個JS外部文件，如下方式調(diào)用：
<script type="text/javascript" src="minmax.js"></script>
我們在樣式表中將min-width應(yīng)用到#wrapper和#footer這兩個容器就行了，并分別設(shè)置它們寬度為100%，OK，現(xiàn)在我們解決了最小寬度的問題。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 下一頁 彈性流體布局 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 彈性流體布局 [1]
第 2 頁 
