|
如何讓創(chuàng)建一個流動布局？
創(chuàng)建流動布局的第一步是創(chuàng)建一個首選的固定寬度的模擬，這樣一來，設(shè)計師能看到其比例，然后使用神圣的比例、平衡和合適的間距技巧。
從上述簡單的布局中，我們可以看到如何在css中規(guī)劃代碼。960px是我們的固定寬度，對于任何小于該尺寸的分辨率屏幕，我們將迫使水平滾動條出現(xiàn)。所有內(nèi)容在一個880px的wrapper里，在左右兩側(cè)有40 px的margin，元素間有20px的間距。
在我們思考其可用性之前，一切安好。這種類型的布局可能適合很多用戶，但未必適合每一個人。因此，我們將其轉(zhuǎn)換成流動布局，如果欲使這一布局在任何分辨率下保持其比例，我們必須將960px的寬度改為100%，然后計算出與880px、640px、200px等值的百分比。
這需要一些理性思考，在我們模擬的固定寬度設(shè)計中，在960px的設(shè)計中，整個wrapper是880px，如果需要與其等價的百分比，我們所要做的是相除。
800pixels / 960pixels = 0.91667
采用十進(jìn)制，將其轉(zhuǎn)換成百分比，得到的是91.6667%。因為當(dāng)前瀏覽器處理百分比的差異，它不會很明智的將所有小數(shù)位數(shù)應(yīng)用到布局之中，瀏覽器要么向上取，要么向下舍。因此，我們需要一個整數(shù)，既然它更接近于92%，我們就向上取，稍后因為額外間隙的存在，我們需要向下舍，這很容易做到。
#wrapper {
width: 92%;
}
對于content和sidebar區(qū)域，我們?nèi)绶ㄅ谥疲璞３终_的比例。因為這個區(qū)域在880px的wrapper內(nèi)，我們需要找到相對于這個區(qū)域的百分比。
640 pixels ÷ 880 pixels = 0.727272 › 73%
220 pixels ÷ 880 pixels = 0.25 › 25%
width: 73%;
}
#sidebar {
width: 25% ;
6.}
我們將實際內(nèi)容區(qū)域的寬度降至72%，這樣我們的布局就不會破壞。因為它位于導(dǎo)航欄的旁邊，我們不希望它太寬。
在處理流動設(shè)計的比例時，這是一個非常簡單的概念，也是更有效的處理方式。借助于這樣的技巧，設(shè)計者沒有理由說不能保持其比例，美觀的布局被破壞。
關(guān)于margin
設(shè)計者可以用不同的方法處理margin，一種方法是計算margin的百分比（此例中為200px/880px）；另外一種是設(shè)置固定的margin，在我們的例子中，硬性大小為20px。
兩種方法各有優(yōu)劣，margin使用百分比，設(shè)計師承擔(dān)者在大分辨率屏幕下margin太大的風(fēng)險但能保持完好的比例。用固定的margin在比例的保持上有輕微的缺陷，但是，無論屏幕分辨率為多大，margin將維持不變。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 自適應(yīng)css布局——流動布局新時代 [1] 下一頁 自適應(yīng)css布局——流動布局新時代 [3]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 自適應(yīng)css布局——流動布局新時代 [2]
