響應式佈局就是一套代碼可以同時在多了設備上運行，而不需要爲每一個終端寫一套代碼，可以根據用戶的屏幕尺寸大小進行相應的調整。從而滿足不用設備用戶的體驗需求。
實現手段
- meta標籤設置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
content參數解釋
width:可視區域的寬度，值可爲數字或關鍵詞device-width
height:同width
intial-scale:頁面首次被顯示是可視區域的縮放級別，取值1.0則頁面按實際尺寸顯示，無任何縮放
maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別，
maximum-scale用戶可將頁面放大的程序，1.0將禁止用戶放大到實際尺寸之上。
user-scalable:是否可對頁面進行縮放，no 禁止縮放
簡單來說就是自動適應手機屏幕大小
- 流式佈局
- 寬度用百分比
- img標籤設置max-width控制圖片最大寬度，防止圖片失真
- 設備查詢，CSS加入以下代碼
@media screen and (min-width: 屏幕寬度最小值){你所要兼容的模塊}
以下列舉常用的尺寸
/*最大1200px顯屏*/
@media screen and (max-width : 1200px) {}
/*最大800px顯屏*/
@media screen and (max-width : 800px) {}
/* 平板電腦和小屏電腦之間的分辨率 */
@media (min-width: 768px) and (max-width: 979px) {}
/*最大640px顯屏*/
@media screen and (max-width : 640px) {}
/* 橫向放置的手機及分辨率更小的設備 */
@media (max-width: 480px) {
}
/*iPad橫板顯屏*/
@media screen and (max-device-width: 1024px) and (orientation: landscape) { }
/*iPad豎板顯屏*/
@media screen and (max-device-width: 768px) and (orientation: portrait) { }
/*iPhone 和 Smartphones*/
@media screen and (min-device-width: 320px) and (min-device-width: 480px) { }
響應式佈局優缺點總結
優點：
1.在不同設備下能有不同的頁面排版，這也是響應式最大的優點，在分辨率不同，設備環境進行一些不同的設計，所有開發維護和運營上，相對多個版本成本會降低很多。
2.兼容性好，能在不同的設備下瀏覽。
3.方便後期維護頁面，只需要對必要的頁面進行修改，不會影響其他頁面。
缺點：
1.頁面加載過多的代碼，當你在pc端加載的時候，css樣式也會將手機端的冗餘代碼一塊加載，這樣就直接影響了加載速度。
2.在響應式設計中，圖片和視頻都是統一加載的，當你在設備低的手機上加載不符合當前需要的圖片或者視頻，就會過多的消耗用戶的流量。
3.侷限性，對於響應式，侷限性較大，不適合一些大型的門戶網或者電商網站，一般門戶網或電商網站一個界面內容較多，而響應式最忌諱較多內容，代碼過多會影響運行速度。