概念 響應式佈局，就是響應式設計方案的呈現。具體點就是在不同的設備上，網頁能自動識別屏幕寬度、並根據設備的顯示面積（一般情況下是指的屏幕寬度，當然，也可以是其他的，可以在下麵詳細解釋）顯示出不同的效果。通俗點就是設計一套佈局，在PC端和移動端都可以使用。 如何實現響應式佈局？ 通俗的有三種方法 1、 ...
概念
響應式佈局，就是響應式設計方案的呈現。具體點就是在不同的設備上，網頁能自動識別屏幕寬度、並根據設備的顯示面積（一般情況下是指的屏幕寬度，當然，也可以是其他的，可以在下麵詳細解釋）顯示出不同的效果。通俗點就是設計一套佈局，在PC端和移動端都可以使用。
如何實現響應式佈局？
通俗的有三種方法
1、百分比
通過將每個盒子的寬度設定百分比來實現。
優點：簡單方便要
缺點:在額外設置margin、padding時，或者使用不同瀏覽器時，會使得佈局混亂
2、meta標簽
代碼段為：
<meta name="viewport" content="width=device-width, initial-scale=1" />
這主要是為了讓代碼適應移動端的屏幕，其中，viewport 是指需要載入meta 標簽時讀取的名字為“視口”，其中的 width 需要等於 device-width（設備寬度），主要是告訴瀏覽器，將佈局視口的寬度設置為設備最理想的寬，initial-scale（縮放比例） 為1，這樣就保證了載入的時候，要獲取設備的寬度，同時要保持原始大小，便於媒體查詢
3、@media 媒體查詢
css代碼段為：
@media screen and (min-width: 10rem) and (max-width: 20rem) { ... }
這裡面的 第一個 screen 意思為屏幕，這裡面還有許多 參數，包括all（用於所有設備）、print（用於印表機和列印預覽）、speech（應用於屏幕閱讀器等發聲設備）。
使用and來併列顯示多種情況，min-width 和max-width 來定義在那種尺寸的屏幕上顯示，這就是響應式的靈魂。
上面的例子，就是 媒體查詢屏幕，最小寬度為10rem 最大寬度我20rem 的設備寬度上來實現大括弧內的樣式或者其他功能，這裡面的rem也可以換成px或者em之類的單位等。
優點：現在大部分的響應式佈局都是使用@media 來實現的，可以書寫大量的公共樣式，在需要適應屏幕的時候，在大括弧內加入相應的功能即可實現響應式佈局。
缺點：可能需要對同一個類書寫不同的樣式，代碼比較繁複，難度也稍微難點。
在應用中使用哪種方法實現響應式？
沒有哪一種方法是完美的，推薦的是三種方法交替使用，在恰當的地方使用恰當的方法。
在佈局過程中，一般都是寬度的百分比與媒體查詢交替使用的，並且在載入網頁之前，加入meta標簽，定義一下viewport的內容，這樣更方便於移動端的響應。也兼顧了設備的相容性。
而響應式的設計方案的一般做法就是根據目標用戶的訪問設備的主要類型做三種或四種佈局。每種佈局有一個區間，比如說小屏的手機分解析度可以設定為[320,640]。然後分別設計每種佈局即可，一般來說，各個佈局主要是調整模塊的排列佈局順序，內容調整越少越好（儘量減少用戶適應成本）。
響應式優點
與以往的彈性盒子相比，響應式佈局會更好的、更主動的根據用戶設備變化更呈現出不同的效果，它比彈性盒子更靈活，可讀性更強。響應式的一套方案解決所有設備的自適應問題。
響應式缺點
研發難度高，對應的css文件可能是多個，也可能是單個。
寫在不是最後的最後，雖然本題是說的深度解析，但其實也只是說了響應式的淺表問題，優化響應式的代碼還有其他的方法，需要人去不斷的研究，提高，如果有錯，歡迎各位斧正。
