靜態布局、自適應布局、流式布局、響應式布局、彈性布局等的概念和區別
一、靜態布局（Static Layout）
即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。
1、布局特點：不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態（定寬度）布局的，也就是設置了min-width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景，這種設計常見與pc端。
2、設計方法：
PC：居中布局，所有樣式使用絕對寬度/高度(px)，設計一個Layout，在屏幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；
移動設備：另外建立移動網站，單獨設計一個布局，使用不同的域名如wap.或m.。
在移動端開發中采用靜態布局的兩種方式：(來自：流布局與響應式網頁設計有什麽區別？)
（1）在viewport meta標簽上設置width=320，頁面的各個元素也采用px作為單位。通過用JS動態修改標簽的initial-scale使得頁面等比縮放，從而剛好占滿整個屏幕。（見前端開發-web app 變革之rem）
（2）設在viewport meta標簽上設置content"width=640,user-scalable=no，頁面的各個元素也采用px作為單位。由於640px超出了手機寬度，瀏覽器會自動縮小頁面至剛好全屏。（具體見content"width=640,user-scalable=no" 然後再進行固定尺寸的px設計？ - 前端開發）
優點：這種布局方式對設計師和CSS編寫者來說都是最簡單的，亦沒有兼容性問題。
缺點：顯而易見，即不能根據用戶的屏幕尺寸做出不同的表現。
當前，大部分門戶網站、大部分企業的PC宣傳站點都采用了這種布局方式。固定像素尺寸的網頁是匹配固定像素尺寸顯示器的最簡單辦法。但這種方法不是一種完全兼容未來網頁的制作方法，我們需要一些適應未知設備的方法。
二、自適應布局（Adaptive Layout）
自適應布局的特點是分別為不同的屏幕分辨率定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕分辨率範圍。改變屏幕分辨率可以切換不同的靜態局部（頁面元素位置發生改變），但在每個靜態布局中，頁面元素不隨窗口大小的調整發生變化。可以把自適應布局看作是靜態布局的一個系列。
1、布局特點：
屏幕分辨率變化時，頁面裏面元素的位置會變化而大小不會變化。
2、設計方法：使用媒體查詢功能
三、流式布局（Liquid Layout）
流式布局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照屏幕分辨率進行適配調整，但布局不變。
1、布局特點：屏幕分辨率變化時，頁面裏元素的大小會變化而位置不會變化。【這就導致如果屏幕太大或者太小都會導致元素無法正常顯示】
2、設計方法：網頁中主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用），例如，設置網頁主體的寬度為80%，min-width為960px。圖片也作類似處理（width:100%, max-width一般設定為圖片本身的尺寸，防止被拉伸而失真）。
這種布局方式在Web前端開發的早期歷史上，用來應對不同尺寸的PC屏幕（那時屏幕尺寸的差異不會太大），在當今的移動端開發也是常用布局方式，但缺點明顯：主要的問題是如果屏幕尺度跨度太大，那麽在相對其原始設計而言過小或過大的屏幕上不能正常顯示。因為寬度使用百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”），顯示非常不協調。
四、響應式布局（Responsive Layout）
隨著CSS3出現了媒體查詢技術，又出現了響應式設計的概念。響應式設計的目標是確保一個頁面在所有終端上（各種尺寸的PC、手機、手表、冰箱的Web瀏覽器等等）都能顯示出令人滿意的效果，對CSS編寫者而言，在實現上不拘泥於具體手法，但通常是糅合了流式布局+彈性布局，再搭配媒體查詢技術使用。——分別為不同的屏幕分辨率定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著窗口調整而自動適配。即：創建多個流體式布局，分別對應一個屏幕分辨率範圍。可以把響應式布局看作是流式布局和自適應布局設計理念的融合。
1、布局特點：每個屏幕分辨率下面會有一個布局樣式，即元素位置和大小都會變。
2、設計方法：媒體查詢+流式布局。
優點：適應pc和移動端，如果足夠耐心，效果完美
缺點：（1）媒體查詢是有限的，也就是可以枚舉出來的，只能適應主流的寬高。（2）要匹配足夠多的屏幕大小，工作量不小，設計也需要多個版本。
響應式頁面在頭部會加上這一段代碼： <meta name="applicable-device" content="pc,mobile"> <meta http-equiv="Cache-Control" content="no-transform ">View Code
總結：
響應式與自適應的原理是相似的，都是檢測設備，根據不同的設備采用不同的css，而且css都是采用的百分比的，而不是固定的寬度，不同點是響應式的模板在不同的設備上看上去是不一樣的，會隨著設備的改變而改變展示樣式，而自適應不會，所有的設備看起來都是一套的模板，不過是長度或者圖片變小了，不會根據設備采用不同的展示樣式，流式就是采用了一些設置，當寬度大於多少時怎麽展示，小於多少時怎麽展示，而且展示的方式向水流一樣，一部分一部分的加載，靜態的就是采用固定寬度的了。
流式布局是用於解決類似的設備不同分辨率之間的兼容(一般分辨率差異較少)；響應式是用於解決不用設備之間不用分辨率之間的兼容問題(一般是指PC，平板，手機等設備之間較大的分辨率差異)。
如何實現響應式布局：折騰響應式布局設計，應運而生的web頁面響應布局
五、rem布局
來自：響應式設計和REM布局的對比（待研究）
先按定高寬設計出來頁面，然後轉換為rem單位，配合js查詢屏幕大小來改變html的font-size，最終做出所謂的完美自適應。 rem一出來，好像所有移動端自適應不采用rem就有點落後，但是我們可以分析：假設以100x100做出網頁，那麽采用rem+js完全可以自適應所有200*200，300*300，450*450等等高寬，結果問題來了，如果用100*100設計好後，來了100*200，100*300，100*400的手機，那麽效果無非兩種：1.網頁內容只局限與網頁頂部，例如100*400的手機，網頁內容只占用的100x100的部分。2.有人說可以高度也js+rem，那麽效果無非是拉伸或者縮放。沒錯，現實中不會有100x400的手機，我想說的是這種rem+js只不過是寬度自適應，高度沒有做到自適應，一些對高度，或者元素間距要求比較高的設計，則這種布局沒有太大的意義。如果只是寬度自適應，那我更推薦的是響應式設計。
優點：理想狀態是所有屏幕的高寬比和最初的設計高寬比一樣，或者相差不多，完美適應。
缺點：碰到重視高度的設計，或者重視元素間間距的設計，那就玩不開了。
響應式和rem布局之間的對比：
響應式的案例：改變瀏覽器寬度，“布局”會隨之變化，不是一成不變的，例如導航欄在大屏幕下是橫排，在小屏幕下是豎排，在超小屏幕下隱藏為菜單，也就是說如果有足夠的耐心，在每一種屏幕下都應該有合理的布局，完美的效果。rem布局：改變瀏覽器寬度，頁面所有元素的高寬都等比例縮放，也就是大屏幕下導航是橫的，小屏幕下還是橫的只不過變小了。
結論： 1.如果只做pc端，那麽靜態布局（定寬度）是最好的選擇； 2.如果做移動端，且設計對高度和元素間距要求不高，那麽rem+js是最好的選擇，一份css+一份js調節font-size搞定； 3.如果pc，移動要兼容，而且要求很高那麽響應式布局還是最好的選擇，前提是設計根據不同的高寬做不同的設計，響應式根據媒體查詢做不同的布局。 4.做設計，耐心也是很重要的，擁有響應式布局+多版本設計+足夠的耐心，才能做出用戶體驗不錯的網站。 六、彈性布局（rem/em布局） 來自：流布局與響應式網頁設計有什麽區別？這類布局的特點是，包裹文字的各元素的尺寸采用em做單位，而頁面的主要劃分區域的尺寸仍使用百分數或px做單位（同「流式布局」或「靜態/固定布局」）。早期瀏覽器不支持整個頁面按比例縮放，僅支持網頁內文字尺寸的放大，這種情況下。使用em做單位，可以使包裹文字的元素隨著文字的縮放而縮放。在那時，為了使單位em更直觀，CSS編寫者常常把body元素的font-size設置為62.5%（瀏覽器默認字體大小16px*62.5%=10px），這樣1em便是10px，方便了計算。在PC端使用彈性布局的另一個理由（也許是2016年的今天的唯一的理由）可以看看EM單位的好處是什麽? - 前端開發
使用了rem單位的彈性布局在移動端也很受歡迎。對於不同尺寸的屏幕，可以統一假設屏幕寬度為640px後編寫CSS（這只是一個例子。當然你也可以假定統一為320px）。此時，我們設定html元素的font-size為40px（同樣，只是舉例），然後各處（元素尺寸、文字大小）使用rem作為單位，隨後搭配媒體查詢或JS，根據屏幕的大小來動態控制html元素的font-size（特定屏幕尺寸下，html元素的font-size應當設置為何值，是使用這個方案時設計師和程序員需要反復考慮後確定的，以下試舉一段相關的CSS媒體查詢代碼），即可自動改變所有用rem定義尺寸的元素的大小（且CSS編寫者在腦中進行換算的計算過程比em簡單得多）。
html { font-size : 20px; } @media only screen and (min-width: 401px){ html { font-size: 25px !important; } } @media only screen and (min-width: 428px){ html { font-size: 26.75px !important; } } @media only screen and (min-width: 481px){ html { font-size: 30px !important; } } @media only screen and (min-width: 569px){ html { font-size: 35px !important; } } @media only screen and (min-width: 641px){ html { font-size: 40px !important; } }View Code
其實在移動端使用所謂的彈性布局，是比較勉強的。移動端彈性布局流行起來的原因歸根結底是rem單位對於（根據屏幕尺寸）調整頁面的各元素的尺寸、文字大小時比較好用。其實，使用vw、vh等後起之秀的單位，可以實現完美的流式布局（高度和文字大小都可以變得“流式”），彈性布局就不再必要了。
靜態布局、自適應布局、流式布局、響應式布局、彈性布局等的概念和區別