網(wǎng)頁布局的四種方式

一、流式布局

流式布局的特點是頁面元素的寬度按照屏幕分辨率進行適配調(diào)整，但整體布局不變。網(wǎng)頁中主要的劃分區(qū)域的尺寸使用百分數(shù)，例如，設(shè)置網(wǎng)頁主體的寬度為80%，min-width為960px。

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

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

二、固定布局

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

三、彈性布局

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

四、自適應(yīng)布局

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