資源描述：
《固定布局、流動布局、彈性布局》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。
1、美景創(chuàng)意www.mjcy.cc一、固定和流動布局的不同點(diǎn)雖然大多數(shù)設(shè)計(jì)者和開發(fā)人員認(rèn)為固定和流動布局的定義很基礎(chǔ)，但為了更為清晰，再復(fù)習(xí)一遍。固定寬度布局（FixedLayout）這種布局有一個設(shè)置了固定寬度的外包裹，里面的各個模塊也是固定寬度而非百分比。重要的是容器（外包裹）元素是設(shè)置為不能移動的。無論訪問者屏幕的分辨率是多少，網(wǎng)頁都顯示為和其它訪問者相同的寬度。上圖展示的是一個固定寬度布局的基本輪廓。里面的三列分別是520，200和200px寬度。960px已經(jīng)成為現(xiàn)代web設(shè)計(jì)的標(biāo)準(zhǔn)，因?yàn)榇蠖鄶?shù)站點(diǎn)
2、用戶被假定為使用1024×768分略率。流動/流體布局（Fluid/LiquidLayout）流體布局，也被成為流體布局，主體部分都是用了百分比寬度，因此可以自適應(yīng)用戶的分辨率。電子郵箱：service@mjcy.cc客服熱線：400-625-9669?美景創(chuàng)意www.mjcy.cc上圖是一個簡單流動（流體）布局的輪廓。雖然有些設(shè)計(jì)師可能給流動布局中某些元素設(shè)置了固定寬度，比如margin，只要主體元素是百分比寬度，就可以讓布局自適應(yīng)適應(yīng)各種分辨率。二、固定寬度頁面設(shè)計(jì)許多設(shè)計(jì)者喜歡固定寬度布局勝過流動布
3、局，因?yàn)樗菀讓?shí)現(xiàn)，并確保了設(shè)計(jì)者所見即用戶所見。不過它和流動布局一樣，具有兩面性。優(yōu)點(diǎn)固定寬度布局更容易使用，在設(shè)計(jì)方面更容易定制。在所有瀏覽器中寬度一樣，所以不會受到圖片、表單、視頻和其他固定寬度內(nèi)容的麻煩。不需要min-width和max-width，所有瀏覽器都支持。即使需要兼容800×600這么小的分辨率，網(wǎng)頁的主體內(nèi)容仍然有足夠的寬度易于閱讀。缺點(diǎn)對于使用高分辨率的用戶，固定寬度布局會留下很大的空白。因此出現(xiàn)了“黃金比例”，“三分定律”，綜合平衡和其他設(shè)計(jì)原則。屏幕分辨率過小時需要垂直滾動條
4、。無縫紋理，連續(xù)的圖案需要適應(yīng)更大的分辨率。固定寬度布局一般在可用性上得分較低。三、流動布局頁面設(shè)計(jì)設(shè)計(jì)師也許有各種理由不使用流動布局設(shè)計(jì)，但這種布局的優(yōu)點(diǎn)是不能被忽視的。電子郵箱：service@mjcy.cc客服熱線：400-625-9669?美景創(chuàng)意www.mjcy.cc優(yōu)點(diǎn)流動布局頁面對用戶更友好，因?yàn)樗茏赃m應(yīng)用戶的設(shè)置。頁面周圍的空白區(qū)域在所有分辨率和瀏覽器下都是相同的，在視覺上更美觀。如果設(shè)計(jì)良好，流動布局可以避免在小分辨率下出現(xiàn)水平滾動條。缺點(diǎn)設(shè)計(jì)者更難控制用戶所見，并可能忽略掉一些錯誤，
5、因?yàn)樵谔囟ǖ姆直媛氏驴雌饋砗玫摹D片，視頻以及其他設(shè)置了寬度的內(nèi)容可能需要多種寬度以適應(yīng)不同分辨率的用戶。在特別大的分辨率下，內(nèi)容會被拉成長長的一行，變得難以閱讀。四、彈性設(shè)計(jì)這是web頁面設(shè)計(jì)的第三種選擇，因?yàn)槟芎推渌麅煞N主要布局類型（固定寬度和流動）結(jié)合使用，彈性設(shè)計(jì)受到設(shè)計(jì)師的歡迎。彈性布局使用em作為單位。下面的引用闡述了什么是em和為什么用它有益?！?px是電腦顯示屏上一個無法度量的一個點(diǎn)，而1em是和元素本身的字體一致。em是相對單位，隨用戶字體大小變化而改變?！彪m然彈性設(shè)計(jì)是為了提供更多好處
6、，但它也像上面兩種布局類型有兩面性。優(yōu)點(diǎn)應(yīng)用恰當(dāng)?shù)膹椥圆季謱τ脩羰钟押?。頁面中所有元素可以隨著用戶的偏好縮放。對于同時喜歡流動和定寬布局的設(shè)計(jì)師來說，彈性布局是完美的，因?yàn)榍皟煞N布局的優(yōu)點(diǎn)在彈性布局中都能找到。缺點(diǎn)正是因?yàn)榈谝粋€優(yōu)點(diǎn)，這種布局會產(chǎn)生一個巨大的可用性問題。需要花更多時間理解和測試，讓布局適合所有用戶。這種布局類型相對于其他兩個更難制作，它能帶來的一點(diǎn)兒可用性提升看起來并不值得。根據(jù)布局的具體情況，一些彈性設(shè)計(jì)需要專門為IE6追加一些樣式。電子郵箱：service@mjcy.cc客服熱線：4
7、00-625-9669
