一、響應式布局概念：
Responsive design，意在實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。
響應式與自適應的區別：
響應式布局：不管用戶使用的是什么設備都是在服務器把數據推送到瀏覽器后，腳本或CSS自行偵測屏幕大小后執行對應的樣式表內容，並且一直通過本地腳本在監聽屏幕大小的變化，隨時做出樣式響應的變化，所以是主動的。同一頁面在不同大小設備可能呈現不一樣的頁面效果
自適應：不同大小設備呈現同樣的頁面效果，只是文字、圖片等的大小不一樣，但是相對位置一樣。即在不同大小設備看起來一樣
二、實現方式
（一）em、rem
1、px—em—rem三者的區別
px：相對於顯示器屏幕分辨率；
em：基於父級元素的字體大小；
rem：基於html的字體大小
2、通過rem來實現響應式布局
rem單位都是相對於根元素html的font-size來決定大小的，根元素的font-size相當於提供了一個基准，當頁面的size發生變化時，只需要改變font-size的值，那么以rem為固定單位的元素的大小也會發生響應的變化。
因此，如果通過rem來實現響應式的布局，只需要根據視圖容器的大小，動態的改變font-size即可。
function refreshRem() { var docEl = doc.documentElement; var width = docEl.getBoundingClientRect().width; var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; } win.addEventListener('resize', refreshRem);
（二）flex彈性盒模型
（三）媒體查詢
使用@media媒體查詢可以針對不同的媒體類型定義不同的樣式，特別是響應式頁面，可以針對不同屏幕的大小，編寫多套樣式，從而達到自適應的效果。
設置步驟如下：
1. 設置 Meta 標簽
大多數移動瀏覽器將HTML頁面放大為寬的視圖（viewport）以符合屏幕分辨率。你可以使用視圖的meta標簽來進行重置。下面的視圖標簽告訴瀏覽器，使用設備的寬度作為視圖寬度並禁止初始的縮放。在<head>標簽里加入這個meta標簽。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
（user-scalable = no 屬性能夠解決 iPad 切換橫屏之后觸摸才能回到具體尺寸的問題。 ）·
3. 通過媒介查詢來設置樣式 Media Queries
Media Queries 是響應式設計的核心。
它根據條件告訴瀏覽器如何為指定視圖寬度渲染頁面。假如一個終端的分辨率小於 980px，那么可以這樣寫：
@media screen and (max-width: 980px) { #head { … } #content { … } #footer { … } }
這里的樣式就會覆蓋上面已經定義好的樣式。
4. 設置多種試圖寬度
如果需要設定兼容 iPad 和 iphone 的視圖，那么可以這樣設置：
/** iPad **/ @media only screen and (min-width: 768px) and (max-width: 1024px) {} /** iPhone **/ @media only screen and (min-width: 320px) and (max-width: 767px) {}
（四）使用百分比布局
（五）通過vw/vh來實現自適應
css3中引入了一個新的單位vw/vh，與視圖窗口有關。vw表示相對於視圖窗口的寬度，vh表示相對於視圖窗口高度，除了vw和vh外，還有vmin和vmax兩個相關的單位。
各個單位具體的含義如下：
| 單位 | 含義 |
|---|---|
| vw | 相對於視窗的寬度，視窗寬度是100vw |
| vh | 相對於視窗的高度，視窗高度是100vh |
| vmin | vw和vh中的較小值 |
| vmax | vw和vh中的較大值 |
這與%十分相似。vw和%的區別為：
| 單位 | 含義 |
|---|---|
| % | 大部分相對於祖先元素，也有相對於自身的情況比如（border-radius、translate等) |
| vw/vh | 相對於視窗的尺寸 |
從對比中我們可以發現，vw單位與百分比類似，單確有區別，前面我們介紹了百分比單位的換算困難，這里的vw更像"理想的百分比單位"。任意層級元素，在使用vw單位的情況下，1vw都等於視圖寬度的百分之一。
參考博客：
https://blog.csdn.net/weixin_33968104/article/details/89701159 常用解決方案對比
http://caibaojian.com/356.html 媒體查詢
https://www.cnblogs.com/aaron---blog/p/10436726.html 彈性盒子模型