帶您了解15種常規(guī)的網(wǎng)頁(yè)布局設(shè)計(jì)
常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)有以下幾種：
1. 靜態(tài)布局
- 特點(diǎn)：網(wǎng)頁(yè)上的所有元素尺寸一律使用像素（px）作為單位，不管瀏覽器尺寸如何，頁(yè)面都按照最初寫(xiě)代碼時(shí)的布局顯示。常規(guī)的PC端網(wǎng)站常采用這種布局，如設(shè)置了min-width，小于該寬度會(huì)出現(xiàn)滾動(dòng)條，大于則內(nèi)容居中外加背景。
- 設(shè)計(jì)方法：在PC端，居中布局，樣式使用絕對(duì)寬度/高度；移動(dòng)設(shè)備則另外建立移動(dòng)網(wǎng)站，單獨(dú)設(shè)計(jì)布局。
- 優(yōu)點(diǎn)：對(duì)設(shè)計(jì)師和CSS編寫(xiě)者來(lái)說(shuō)簡(jiǎn)單，無(wú)兼容性問(wèn)題。
- 缺點(diǎn)：不能根據(jù)用戶(hù)屏幕尺寸做出不同表現(xiàn)，不是完全兼容未來(lái)網(wǎng)頁(yè)的制作方法。
2. 流式布局
- 特點(diǎn)：頁(yè)面元素的寬度按照屏幕分辨率進(jìn)行適配調(diào)整，但整體布局不變。代表作是柵欄系統(tǒng)（網(wǎng)格系統(tǒng)），主要?jiǎng)澐謪^(qū)域的尺寸使用百分?jǐn)?shù)（搭配min-、max-屬性使用）。
- 設(shè)計(jì)方法：使用%百分比定義寬度，高度大都用px來(lái)固定，可配合max-width/min-width等屬性控制尺寸流動(dòng)范圍。
- 優(yōu)點(diǎn)：能適應(yīng)一定范圍內(nèi)的屏幕尺寸變化，在PC前端開(kāi)發(fā)早期及移動(dòng)端開(kāi)發(fā)常用。
- 缺點(diǎn)：如果屏幕尺度跨度太大，在大屏幕手機(jī)下顯示效果可能不協(xié)調(diào)，因?yàn)閷挾扔冒俜直榷x，而高度和文字大小等大都是用px來(lái)固定。
3. 自適應(yīng)布局
- 特點(diǎn)：分別為不同的屏幕分辨率定義布局，即創(chuàng)建多個(gè)靜態(tài)布局，每個(gè)靜態(tài)布局對(duì)應(yīng)一個(gè)屏幕分辨率范圍，改變屏幕分辨率時(shí)頁(yè)面元素位置會(huì)變化，但大小不會(huì)變。
- 設(shè)計(jì)方法：使用@media媒體查詢(xún)給不同尺寸和介質(zhì)的設(shè)備切換不同的樣式。
- 優(yōu)點(diǎn)：可以為適配范圍內(nèi)的設(shè)備提供較好的體驗(yàn)，在同一個(gè)設(shè)備下實(shí)際是固定的布局。
- 缺點(diǎn)：需要為不同設(shè)備準(zhǔn)備多個(gè)版本的布局，工作量較大。
4. 響應(yīng)式布局
- 特點(diǎn)：確保頁(yè)面在所有終端上都能顯示出令人滿(mǎn)意的效果，糅合了流式布局+彈性布局，再搭配媒體查詢(xún)技術(shù)使用，每個(gè)屏幕分辨率下面都有一個(gè)布局樣式，元素位置和大小都會(huì)變。
- 設(shè)計(jì)方法：通常使用@media媒體查詢(xún)和網(wǎng)格系統(tǒng)配合相對(duì)布局單位進(jìn)行布局。
- 優(yōu)點(diǎn)：能適應(yīng)PC和移動(dòng)端等多種設(shè)備，效果較好。
- 缺點(diǎn)：媒體查詢(xún)是有限的，只能適應(yīng)主流的寬高；要匹配足夠多的屏幕大小，工作量不小，設(shè)計(jì)也需要多個(gè)版本。
5. 彈性布局（rem/em布局）
- 特點(diǎn)：使用em或rem單位進(jìn)行相對(duì)布局，相對(duì)%百分比更加靈活，同時(shí)可以支持瀏覽器的字體大小調(diào)整和縮放等的正常顯示。
- 設(shè)計(jì)方法：使用em或rem單位定義尺寸，常需設(shè)置根節(jié)點(diǎn)html的字體大小以方便計(jì)算。
- 優(yōu)點(diǎn)：更能適應(yīng)縮進(jìn)、padding或margin以及瀏覽器設(shè)置字體尺寸等情況，在移動(dòng)端也很受歡迎。
- 缺點(diǎn)：早期瀏覽器對(duì)整個(gè)頁(yè)面按比例縮放的支持不佳，僅支持網(wǎng)頁(yè)內(nèi)文字尺寸的放大。
總之，以上每種網(wǎng)頁(yè)布局設(shè)計(jì)都有其獨(dú)特的特點(diǎn)和適用場(chǎng)景。在實(shí)際的網(wǎng)頁(yè)設(shè)計(jì)中，應(yīng)根據(jù)項(xiàng)目的具體需求、目標(biāo)受眾以及設(shè)備的多樣性來(lái)選擇合適的布局方式，以確保網(wǎng)頁(yè)在各種情況下都能呈現(xiàn)出良好的視覺(jué)效果和用戶(hù)體驗(yàn)。
