響應式布局是一個很基礎的前端布局，就是很基礎的CSS變換（基於本人有問必答的特點，開車！）。首先，關於布局的方式有哪些，前面隨筆提到過，再次贅訴一下吧。
移動端的幾種布局的方式，現在常用的大致上分為以下五種，分別是
1.靜態布局(Static Layou)
2.流式布局(LIquid Layout)，代表作有柵欄系統-->網格系統
3.自適應布局
4.響應式布局.
5.彈性布局（rem/em布局）
響應式布局，即“Responsive design”，意在實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。
在使用方面，針對不同的項目復雜程度類型，我覺得可以在使用media的基礎上加一個flex布局（當然，flex還是針對簡單的容易的），大多還是要看Media Queries。關於flex思想不多說。
在使用Media Queries的常用步驟有：
1.在header里面加視圖標簽，目的是告訴瀏覽器，使用設備的寬度作為視圖寬度並禁止初始的縮放。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
2.通過媒體查詢設置不同屏幕尺寸下的樣式。
@media screen and (max-width: 1080px) {
#head { … }
#content { … }
#footer { … }
}
上面是寫在一個頁面里，當然也是可以css文件形式直接放在link標簽里面，這樣看着主要是不混亂更清楚各種尺寸。
<link rel="stylesheet" type="text/css" href="styleID.css" media="screen and (min-width: 800px) and (max-width: 1500px)">
至於css文件里的樣式寫法和放在同一頁面里的一致。
要注意的是由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要，否則會出現橫向滾動條。寬度可以用百分比來實現。
#head { width: 100% }
#content { width: 50%; }
上面大致是響應式的一些基本處理方式，根據不同標簽如img、video、audio等等還是要多注意寬度，兼容方面的不多做闡述
響應式布局對用戶來說是非常棒的體驗，用啥都可以看，還能有不同的操作體驗，但對於開發者來說就不那么友好了，多一套設備意味着多一套樣式表，老打工人了....