網(wǎng)頁布局方式有哪些

一、流式布局（Liquid Layout）

流式布局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照屏幕分辨率進行適配調(diào)整，但整體布局不變。代表作柵欄系統(tǒng)（網(wǎng)格系統(tǒng)）。

網(wǎng)頁中主要的劃分區(qū)域的尺寸使用百分數(shù)（搭配min-*、max-*屬性使用），例如，設置網(wǎng)頁主體的寬度為80%，min-width為960px。圖片也作類似處理（width:100%,max-width一般設定為圖片本身的尺寸，防止被拉伸而失真）。

布局特點：屏幕分辨率變化時，頁面里元素的大小會變化而但布局不變?！具@就導致如果屏幕太大或者太小都會導致元素無法正常顯示。

設計方法：使用%百分比定義寬度，高度大都是用px來固定住，可以根據(jù)可視區(qū)域 (viewport) 和父元素的實時尺寸進行調(diào)整，盡可能的適應各種分辨率。往往配合 max-width/min-width 等屬性控制尺寸流動范圍以免過大或者過小影響閱讀。

這種布局方式在Web前端開發(fā)的早期歷史上，用來應對不同尺寸的PC屏幕（那時屏幕尺寸的差異不會太大），在當今的移動端開發(fā)也是常用布局方式，但缺點明顯：主要的問題是如果屏幕尺度跨度太大，那么在相對其原始設計而言過小或過大的屏幕上不能正常顯示。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”），顯示非常不協(xié)調(diào)

二、固定布局 Fixed

在固定布局中，網(wǎng)頁的寬度是必須指定為一個像素值，一般為960px。過去，開發(fā)人員發(fā)現(xiàn)960px是最適合作為網(wǎng)格布局的寬度，因為960可以整除3，4，5，6，8，10，12和15。在今天，在web開發(fā)中還是比較普遍使用固定寬度布局的，因為這種布局具有很強的穩(wěn)定性與可控性。但是同時也有一些劣勢，固定寬度必須考慮網(wǎng)站是否可以適用于不同的屏幕寬度。

三、彈性布局 Elastic

彈性布局跟流布局很像，主要不同是大小單位。彈性布局的大小單位不是像素或者百分比，而是em或者rem，避免了根據(jù)px局部在高分辨率下幾乎無法辨識的缺點，又相對于%百分比更加靈活，同時可以支持瀏覽器的字體大小調(diào)整和縮放等的正常顯示，需要一段時間適應而且不易從其他布局轉(zhuǎn)換過來。

四、自適應布局（Adaptive Layout）

自適應布局的特點是分別為不同的屏幕分辨率定義布局，即創(chuàng)建多個靜態(tài)布局，每個靜態(tài)布局對應一個屏幕分辨率范圍。改變屏幕分辨率可以切換不同的靜態(tài)局部（頁面元素位置發(fā)生改變），但在每個靜態(tài)布局中，頁面元素不隨窗口大小的調(diào)整發(fā)生變化?？梢园炎赃m應布局看作是靜態(tài)布局的一個系列。

布局特點：屏幕分辨率變化時，頁面里面元素的位置會變化而大小不會變化。

設計方法：使用 @media 媒體查詢給不同尺寸和介質(zhì)的設備切換不同的樣式。在優(yōu)秀的響應范圍設計下可以給適配范圍內(nèi)的設備最好的體驗，在同一個設備下實際還是固定的布局。