靜態佈局、流式佈局、自適應佈局、響應式佈局
參考資料
固定佈局（fixed layout）
即傳統佈局，網頁上的所有元素的尺寸一律用px作為單位。不管瀏覽器尺寸具體是多少，網頁佈局始終按照最初寫程式碼時的佈局來顯示。常規的pc的網站都是靜態（定寬度）佈局的，也就是設定了min-width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景，這種設計常見於pc端。
靜態佈局的優點是對設計師和CSS編寫者來說是最簡單的，沒有相容性問題。缺點也很明顯，不能根據使用者的品目尺寸做出不同的表現。
當前，大部分入口網站、大部分企業的PC宣傳站點都採用了這種佈局方式。固定畫素尺寸的網頁是匹配固定畫素尺寸顯示器的最簡單辦法。但這種方法不是一種完全相容未來網頁的製作方法，我們需要一些適應未知裝置的方法。
流式佈局（fluid layout）
頁面元素的寬度按照螢幕解析度進行適配調整，但整體佈局不變。代表作柵欄系統（網格系統）。
實現上，使用%百分比定義寬度，高度大都是用px來固定住，可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整，儘可能的適應各種解析度。往往配合 max-width/min-width 等屬性控制尺寸流動範圍以免過大或者過小影響閱讀。
這種佈局方式在Web前端開發的早期歷史上，用來應對不同尺寸的PC螢幕（那時螢幕尺寸的差異不會太大），在當今的移動端開發也是常用佈局方式，但缺點明顯：主要的問題是如果螢幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的螢幕上不能正常顯示。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大螢幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”），顯示非常不協調。
自適應佈局和響應式佈局
參考"Responsive design和Adaptive design的區別？"這篇文章中的多個回答可以知道，兩者都是根據不同的裝置呈現不同的頁面佈局，但實現上有所不同：
- 自適應佈局是伺服器根據HTTP請求中攜帶的使用者裝置資訊返回伺服器上針對不同裝置的網頁檔案，需要事先編寫多套頁面；
- 響應式佈局是伺服器返回的是同一套網頁檔案，但會採用@media技術在前端監測裝置資訊，從而決定使用哪些樣式檔案；
為什麼有這兩種方案，並且經常引起混淆呢。有一個答案說得比較合理，那就是以前都是PC端的網頁，後來慢慢地移動端興起，各公司需要新增移動端的網頁，伺服器針對不同的終端返回不同的頁面，這時候產生了自適應佈局的概念；後來出現了css3、media、viewport等新特性，這時候開發新網站，就可以用一套網頁來適應所有終端，這時候產生了響應式佈局的概念。但自適應並不會被淘汰，因為從seo角度來看，google的amp、百度的mip都要求移動端採用不同的html標籤，這時候自適應就是不二選擇。
自適應佈局的實現不用多說，編寫多套網頁就行了，接下來主要講響應式佈局的實現。
響應式佈局的實現說來也簡單，在css檔案層面上，我們可以這樣做：
<link rel="stylesheet" type="text/css" href="common.css" media="all" />
<link rel="stylesheet" type="text/css" href="normalScreen.css" media="screen and (max-width: 1024px)" />
<link rel="stylesheet" type="text/css" href="widthScreen.css" media="screen and (min-width: 1024px)" />
對於IE6~8，應改寫為：
<script> if (!window.screenX) { //IE6~8 var oStyle = document.createElement("link"); oStyle.rel = "stylesheet"; oStyle.type = "text/css"; if (screen.width > 1024) { oStyle.href = "widthScreen.css"; } else { oStyle.href = "normalScreen.css"; } document.getElementsByTagName("head")[0].appendChild(oStyle); } </script>
在選擇器層面上在，則可以這樣做：
.example {
padding: 20px;
color: white;
}
/* 超小型裝置（手機） */
@media only screen and (max-width: 600px) {
.example { background-color: red; }
}
/* 小型裝置（豎屏平板電腦） */
@media only screen and (min-width: 600px) {
.example { background-color: green; }
}
/* 中型裝置（橫屏平板電腦） */
@media only screen and (min-width: 768px) {
.example { background-color: orange; }
}
/* 大型裝置（膝上型電腦和臺式電腦） */
@media only screen and (min-width: 992 px) {
.example { background-color: blue ; }
}
/* 超大型裝置（大型筆記本和臺式電腦） */
@media only screen and (min-width: 1200px) {
.example { background-color: pink; }
}