一、什么是響應式布局？
響應式設計：Responseive design，就是一個網站，一套代碼能在所有終端能夠正常展示，並不是為每個終端做一個特定版本，響應式是為解決移動互聯網瀏覽器而誕生的。
二、響應式設計步驟
2.1、viewport 設置
大多數移動端瀏覽器都將html頁面的寬度作為可視區的視圖以符合屏幕分辨率，所以我們需要利用 meta 設置 viewport ，將網頁寬度設為設備寬度。
在head中添加meta標簽，設置設備的寬度作為視圖大小，禁止縮放。代碼如下：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
2.2、媒體查詢
媒體查詢：Media Queries，是響應式布局的核心，瀏覽器會根據條件選擇需要渲染的html和css內容。多種屏幕設備的寬度主要分為四個區間。
| 超小屏幕 |
小屏幕 |
中等屏幕 |
大屏幕 |
媒體查詢有兩種引入方式：內部引入和外部引入。
2.2.1、內部引入
/* 手機端樣式 */ @media screen and (max-width:768){} /* ipad終端樣式 */ @media screen and (min-width:768px) and ( max-width:992px ){} /*筆記本樣式*/ @media screen and (min-width:992px) and (max-width:1200px){} /* 台式機大屏 */ @media screen and (min-width:1200px){}2.2.2、外部引入
/* 手機端樣式 */ <link rel="stylesheet" media="screen and (max-width:768px)" /> /* ipad終端樣式 */ <link rel="stylesheet" media="screen and (min-width:768px) and ( max-width:992px )" /> /*筆記本樣式*/ <link rel="stylesheet" media="screen and (min-width:992px) and (max-width:1200px)" /> /* 台式機大屏 */ <link rel="stylesheet" media="screen and (min-width:1200px)" />注意：
- 使用媒體查詢的時候，要把公共樣式放到最前邊，媒體查詢代碼放到最后。
- 寫媒體查詢的時候要按照屏幕從小到大的設置。
- 外層包裹的元素寬度處理要使用百分比。
- 圖片縮放處理的時候容易失真，所以嘗試給圖片添加最大最小的寬度。
三、響應式布局實例
eg：制作一個展示圖片的列表，大屏展示一行4張圖片，ipad一行展示3張圖片，手機一行展示兩張圖片。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .list{ width:100%; max-width:1200px; padding:0; margin:0 auto; } .pic{ float:left; list-style:none; box-sizing: border-box; padding:10px; margin:15px 0px; } .picture{ width:100%; height:100px; background:#eaeaea; } @media screen and (max-width:768px) { .pic{ width:50%; } } @media screen and (min-width:768px) and (max-width:992px) { .pic{ width:33%; } } @media screen and (min-width:992px) { .pic{ width:25%; } } </style> </head> <body> <ul class="list"> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> </ul> </body> </html>
運行以后不斷改變瀏覽器的寬度，圖片元素布局會自動改變。
bootstrap框架用的就是媒體查詢原理，我們做響應式布局的時候，基本都會借用bootstrap框架提高工作效率。
四、響應式優缺點
4.1、優點：
- 面對不同分辨率設備靈活性強。
- 能夠快捷解決多設備顯示的適應問題。
4.2、缺點：
- 響應式網站無法區分移動端，所以會出現隱藏部分無用內容，浪費寬度，加載耗時長。響應式布局使用移動端窄屏時，隱藏內容依然會加載，低分辨率加載高質量圖片或視頻，不同屏幕尺寸都提供相同的網頁，加載內容多，浪費流量，速度慢，容易造成用戶流失。
- 兼容所有終端，工作量大，效率低下。
- 僅適用布局、信息、框架並不復雜的部門類型網站。
- 響應式對於 低版本IE瀏覽器簡直是悲劇。響應式里運用了很多html5新特性，而這些特性只要高級瀏覽器才支持，所以在IE6、7、8幾乎是看不了的。
- 響應式設計不利於百度關鍵詞優化和排名。用戶在不同終端搜索習慣不同，百度對移動端和PC端的關鍵詞處理策略也不同，百度搜索排名也是有PC和移動端之分的，所以如果要做優化，不建議響應式布局。
建議你的網站最好分別制作移動端和PC端，這樣網站性能、用戶體驗、用戶留存相對來說會好很多。大公司它們的網站都是獨立的，很少使用響應式布局。