網(wǎng)頁版式設(shè)計分析（版式設(shè)計五種排版）

發(fā)布時間：2025-08-18 | 來源：互聯(lián)網(wǎng)轉(zhuǎn)載和整理

布局類型

一塊面包加了鹽，就會變咸；一塊面包加了糖，就會變甜。一塊同樣的面包，就因為加了不同的調(diào)料就會有不同的味道。同樣的，同一個的設(shè)計稿，用不同的網(wǎng)頁布局去制作，就會得到完全不一樣的網(wǎng)頁風格！

這里所說的網(wǎng)頁布局，并不是一搜百度就出來的什么全屏布局類型、中心排列類型等等，這些是偏向設(shè)計師的角度，畢竟設(shè)計師設(shè)計一個網(wǎng)頁排版一天一個不重樣都行！沒有太大的討論意義！

各式各樣的網(wǎng)頁排版

但是無論哪一種網(wǎng)頁設(shè)計排版，都不得不面對一個問題：面對不同的設(shè)備尺寸，網(wǎng)頁要怎么處理。

接下來所說的網(wǎng)頁布局，偏向程序員角度，主要解決網(wǎng)頁和設(shè)備尺寸的搭配關(guān)系。

靜態(tài)布局

這種布局也叫做‘固定布局’，是最原始的網(wǎng)頁布局類型，任何人剛接觸前端，做出的網(wǎng)頁都是這種。

這種布局最大的特點，就是網(wǎng)頁是固定的寬度，通常以px為單位長度，常見于pc端網(wǎng)頁。很多新聞類、資訊類網(wǎng)站都是采用這種布局類型。

像是360導(dǎo)航頁，中間主體內(nèi)容是固定寬度

這種布局具有很強的穩(wěn)定性與可控性，也沒有兼容性問題，但不能根據(jù)用戶的屏幕尺寸做出不同的表現(xiàn)。即如果用戶的屏幕分辨率小于這個寬度就會出現(xiàn)滾動條，如果大于這個寬度則會留下空白。

自適應(yīng)布局

隨著電腦屏幕做來做大，24寸、27寸的電腦屏幕作為主流，靜態(tài)布局的網(wǎng)頁就顯得非常難看。因為如果網(wǎng)頁是以14寸電腦屏幕的尺寸作為基礎(chǔ)，偌大的屏幕，就顯示一點點內(nèi)容。

同樣如果網(wǎng)頁是以27寸電腦屏幕作為尺寸基礎(chǔ)，13寸筆記本瀏覽此網(wǎng)頁，就會出現(xiàn)滾動條。

很明顯，需要一種能夠自己適應(yīng)不同尺寸寬度的布局，能夠等比例縮放大小，這種布局就是自適應(yīng)布局。

自始至終，都是鋪滿屏幕

這種自適應(yīng)布局的好處很明顯，可以適配大部分顯示屏不同的尺寸，而且還可以隨著瀏覽器窗口調(diào)整而動態(tài)調(diào)整，體驗效果又上了一級。

當然代碼量、難度肯定是比靜態(tài)布局要多了，要實現(xiàn)這種布局不能只靠px固定單位，還需要結(jié)合%百分比、rem等動態(tài)單位。

響應(yīng)式布局

自從iPhone4面世以來，手機、平板等移動設(shè)備使用時常越來越長，這就意味著網(wǎng)頁也要適配移動設(shè)備。

自適應(yīng)布局確實能解決適配不同尺寸的難題，但是有個局限性，就是只適用于電腦端，例如14寸的筆記本和5寸的手機，同時顯示自適應(yīng)布局的網(wǎng)頁，就會發(fā)現(xiàn)手機里的網(wǎng)頁，小到無法瀏覽。

自適應(yīng)布局的本質(zhì)就是網(wǎng)頁根據(jù)屏幕的大小等比例放大縮小。很明顯手機這類小尺寸屏幕根本不適合，更何況現(xiàn)在還有智能手表呢！

面對這種情況，就需要一個網(wǎng)頁有多套樣式，根據(jù)屏幕的大小，切換不同的樣式。

就像變臉，但依然是同一個網(wǎng)頁

在實際開發(fā)中，往往都是自適應(yīng)和響應(yīng)式一起使用，兩個是不沖突。比如根據(jù)屏幕寬度，自定義出手機樣式和電腦樣式（響應(yīng)式）。無論是那種樣式，都需要做自適應(yīng)處理，進一步提升體驗。

毫無疑問，這種布局當然是最完美，但是工作量非常大，這就需要借助第三方ui框架開發(fā)，例如bootstrap等等。

瀑布流式布局

這幾年的審美也在不斷豐富，例如出現(xiàn)了瀑布流式布局，里面的元素會像水流填滿每一處。這種布局很受女性購物網(wǎng)站歡迎，蘑菇街就是這種設(shè)置。

女性很偏愛這種風格

總結(jié)

實際開發(fā)中，往往都是多種布局結(jié)合在一起，各取優(yōu)處，才能把前端的體驗做到極致！