1、靜態布局

即傳統網頁設計模式，只需做一套尺寸的設計稿（比如1280*800px），一旦設備分辨率寬度小于1280px，則出現橫向滾動條，一旦設備分辨率寬度大于1280px，則內容居中顯示，兩邊留白。（常見于新聞類、電商類、政府類網頁），這種布局方式對設計師和前端而言是zui簡單的。

2、自適應布局

可以把自適應布局看作是靜態布局的一個系列。自適應布局的特點是為不同的屏幕分辨率定義固定布局，即創建多個靜態布局。一個靜態布局對應一個屏幕分辨率，改變屏幕分辨率可以切換不同的靜態局部，但頁面元素不隨窗口大小的調整發生變化。簡而言之就是需要自適應幾個終端，就需要出幾套尺寸的設計稿。

3、彈性布局

以百分比作為頁面的基本單位，可以適應一定范圍內所有尺寸的設備屏幕及瀏覽器寬度，并能好利用有效空間展現zui佳效果。

4、混合式布局

混合式布局就是為不同終端設備的屏幕分辨率定義布局（適配各種尺寸的PC、手機、穿戴設備等等），在每個布局中，頁面元素隨著窗口調整而自動適配，混合了百分比、像素為基本單位的組合方式。可以把混合式布局看作是彈性布局、自適應布局的融合。簡而言之就是只需要一套設計稿適應多個終端。

自適應布局、彈性布局、混合布局都是響應式布局方式的一種。其中自適應布局的實現成本zui低，但拓展性比較差；而彈性布局與混合布局效果都是比較理想的響應式布局實現方式。很多時候，單一方式的布局響應無法滿足理想效果，需要結合多種組合方式，但原則上盡可能是保持簡單輕巧，而且同一斷點內（發生布局改變的臨界點稱之為斷點）保持統一邏輯，否則頁面實現太過復雜也會影響整體體驗和頁面性能。一般通欄、等分結構的布局適合采用彈性布局方式，非等分的多欄結構布局則需要采用混合布局的實現方式。

我所接觸的網站項目幾乎也都是響應式開發，顯然響應式已成為網頁設計的標配，而不是什么奢侈品。所以，牢牢掌握響應式布局設計規范也是ji為必要的。

當前文章：網頁設計中網頁布局的主要方式有哪些
本文來源：http://m.2m8n56k.cn/news23/132873.html

成都網站建設公司_創新互聯，為您提供網頁設計公司、網站排名、移動網站建設、虛擬主機、企業網站制作、軟件開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯