一、靜態布局（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大小，即頁面根元素。
3、這類布局的特點是，包裹文字的各元素的尺寸採用em/rem做單位，而頁面的主要劃分區域的尺寸仍使用百分數或px做單位（同「流式布局」或「靜態/固定布局」）。早期瀏覽器不支援整個頁面按比例縮放，僅支援網頁內文字尺寸的放大，這種情況下。使用em/rem做單位，可以使包裹文字的元素隨著文字的縮放而縮放。
rem適配布局
rem適配布局 rem基礎 rem是乙個單位 rem root em 是乙個相對單位，類似於em，em是父元素字型大小 不同的是rem的基準是相對於html元素的字型大小 比如，根元素 html 設定font size 12px 非根元素設定width 2rem 則換成px表示就是24px rem的...
rem適配布局
rem root em 是乙個相對單位，類似em，em是相對于父元素的字型大小 不同的是rem的基準是相對於html元素的字型大小 rem的優勢 父元素文字大小可能不一致，但是整個頁面只有乙個html，可以很好來控制整個頁面的元 素大小 查詢 media query 是css3新語法 media m...
rem適配布局
思考？頁面布局文字能否隨著螢幕大小變化而變化？流式布局和flex布局主要針對與寬度布局，那高度如何設定？怎麼樣讓螢幕發生變化的時候元素高度和寬度等比例縮放？這時就需要用到rem適配布局。rem root em 是乙個相對單位，類似於em,em是相對于父元素的字型大小。而rem的基準是相對於html元...