1.固定布局，靜態布局
傳統Web設計，網頁上的所有元素的尺寸壹律使用px作為單位，網頁寬度壹般為960px。網頁布局始終按照最初寫代碼時的布局來顯示，不受瀏覽器影響。如果瀏覽器寬度如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景
2.流式布局
流式布局使用的是百分比，這位網頁提供了很強的可塑性和流動性，與固定寬度布局基本不同點 就在於對網站尺寸的側量單位不同。屏幕分辨率變化時，頁面裏元素的大小會變化而但布局不變，這可能導致如果屏幕太大或者太小都會導致元素無法正常顯示。
3.自適應布局
自適應布局的特點是分別為不同的屏幕分辨率定義布局，即創建多個靜態布局，每個靜態布局對應壹個屏幕分辨率範圍。使用 @media 媒體查詢給不同尺寸和介質的設備切換不同的樣式，例如寬度960px是壹種樣式，網頁寬度1440px是另壹種樣式。改變屏幕分辨率可以切換不同的靜態局部，但在每個靜態布局中，頁面元素不隨窗口大小的調整發生變化。
4.彈性布局
使用?em 或 rem 單位進行相對布局，相對%百分比更加靈活，同時可以支持瀏覽器的字體大小調整和縮放等的正常顯示。這種布局中包裹文字的各元素的尺寸采用em/rem做單位，而頁面的主要劃分區域的尺寸仍使用百分數或px做單位。默認的文字大小16px就是1em。
5.響應式布局
每個屏幕分辨率下面會有壹個布局樣式，即元素位置和大小都會變，設計方法通常采用了媒體查詢+流式布局，使用@media媒體查詢給不同尺寸和介質的設備切換不同的樣式。為不同終端的用戶提供更加舒適的界面和更好的用戶體驗。