一、靜態佈局（Static Layout）
以像素作爲頁面的基本單位，不管設備和瀏覽器寬度，只設計一套尺寸。常規的pc的網站都是靜態（定寬度）佈局的，也就是設置了min-width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景，這種設計常見與pc端。
二、流式佈局（Liquid Layout）
也叫百分比佈局。
網頁中主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用），例如，設置網頁主體的寬度爲80%，min-width爲960px。圖片也作類似處理（width:100%, max-width一般設定爲圖片本身的尺寸，防止被拉伸而失真）。
1、佈局特點：屏幕分辨率變化時，頁面裏元素的大小會變化而但佈局不變。【這就導致如果屏幕太大或者太小都會導致元素無法正常顯示】
2、設計方法：使用%百分比定義寬度，高度大都是用px來固定住，可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整，儘可能的適應各種分辨率。往往配合 max-width/min-width 等屬性控制尺寸流動範圍以免過大或者過小影響閱讀。
這種佈局方式在Web前端開發的早期歷史上，用來應對不同尺寸的PC屏幕（那時屏幕尺寸的差異不會太大），在當今的移動端開發也是常用佈局方式，但缺點明顯：主要的問題是如果屏幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的屏幕上不能正常顯示。因爲寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”），顯示非常不協調。
核心：寬百分比佈局，高度一般固定
三、自適應佈局（Adaptive Layout）
自適應佈局的特點是分別爲不同的屏幕分辨率定義佈局
核心：寬或者高 auto
四、響應式佈局（Responsive Layout）
可以把響應式佈局看作是流式佈局和自適應佈局設計理念的融合，在每個佈局中，應用流式佈局的理念，即頁面元素寬度隨着窗口調整而自動適配。即：創建多個流體式佈局，分別對應一個屏幕分辨率範圍。
核心：媒體查詢+流體式佈局。彌補高度過長或者過短
總結：
響應式與自適應的原理是相似的，都是檢測設備，根據不同的設備採用不同的css，而且css都是採用的百分比的，而不是固定的寬度，不同點是響應式的模板在不同的設備上看上去是不一樣的，會隨着設備的改變而改變展示樣式，而自適應不會，所有的設備看起來都是一套的模板，不過是長度或者圖片變小了，不會根據設備採用不同的展示樣式，流式就是採用了一些設置，當寬度大於多少時怎麼展示，小於多少時怎麼展示，而且展示的方式向水流一樣，一部分一部分的加載，靜態的就是採用固定寬度的了。
流式佈局是用於解決類似的設備不同分辨率之間的兼容(一般分辨率差異較少)；響應式是用於解決不用設備之間不用分辨率之間的兼容問題(一般是指PC，平板，手機等設備之間較大的分辨率差異)。
五、彈性佈局（rem/em佈局和flex佈局）
1、rem,em區別：rem,em都是順應不同網頁字體大小展現而產生的。其中，em是相對其父元素，在實際應用中相對而言會帶來很多不便；而rem是始終相對於html大小，即頁面根元素。
2、使用 em 或 rem 單位進行相對佈局，相對%百分比更加靈活，同時可以支持瀏覽器的字體大小調整和縮放等的正常顯示，因爲em是相對父級元素的原因沒有得到推廣。【中國站點製作網頁的時候，習慣用CSS強制定義字體大小，保證每個人都看到一致的效果，包括網易、搜狐這些門戶網站在內的大部分站點，用的都是絕對單位px（像素）。但是，如果從網站易用性方面考慮，字體大小應該是可變的，一些視力不是那麼好的人需要放大字體才能看得清頁面內容。然而，佔據大部分瀏覽器市場的IE無法調整那些使用px作爲單位的字體大小。國外人士非常重視網站的易用性，相當一部分外國站點已經使用em作爲字體單位。】
3、這類佈局的特點是，包裹文字的各元素的尺寸採用em/rem做單位，而頁面的主要劃分區域的尺寸仍使用百分數或px做單位（同「流式佈局」或「靜態/固定佈局」）。早期瀏覽器不支持整個頁面按比例縮放，僅支持網頁內文字尺寸的放大，這種情況下。使用em/rem做單位，可以使包裹文字的元素隨着文字的縮放而縮放。