響應式佈局是一個很基礎的前端佈局，就是很基礎的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等等還是要多注意寬度，兼容方面的不多做闡述
響應式佈局對用戶來說是非常棒的體驗，用啥都可以看，還能有不同的操作體驗，但對於開發者來說就不那麼友好了，多一套設備意味着多一套樣式表，老打工人了....