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