定義
響應式布局指的是同一頁面在不同螢幕尺寸下有不同的布局。傳統的開發方式是pc端開發一套，手機端再開發一套，而使用響應式布局只要開發一套就夠。
優點面對不同解析度裝置靈活性強
能夠快捷解決多裝置顯示適應問題
缺點僅適用布局、資訊、框架並不複雜的部門型別**
相容各種裝置工作量大，效率低下
**累贅，會出現隱藏無用的元素，載入時間加長
其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果
一定程度上改變了**原有的布局結構，會出現使用者混淆的情況
響應式與自適應區別
響應式：只需要開發一套**。
響應式設計通過檢測視口解析度，針對不同客戶端在客戶端做**處理，來展現不同的布局和內容。
自適應：需要開發多套介面。
通過檢測視口解析度，來判斷當前訪問的裝置是：pc端、平板、手機，從而請求服務層，返回不同的頁面。
響應式布局方法一：**查詢
使用@media**查詢可以針對不同的**型別定義不同的樣式，特別是響應式頁面，可以針對不同螢幕的大小，編寫多套樣式，從而達到自適應的效果。舉例來說：
@media screen and (max-width: 960px)
}@media screen and (max-width: 768px)
}@media screen and (max-width: 550px)
}@media screen and (max-width: 320px)
}複製**上述的**通過**查詢定義了幾套樣式，通過max-width設定樣式生效時的最大解析度，上述的**分別對解析度在0～320px，320px～550px，550px～768px以及768px～960px的螢幕設定了不同的背景顏色。
通過**查詢，可以通過給不同解析度的裝置編寫不同的樣式來實現響應式的布局，比如我們為不同解析度的螢幕，設定不同的背景。比如給小螢幕手機設定@2x圖，為大螢幕手機設定@3x圖，通過**查詢就能很方便的實現。
但是**查詢的缺點也很明顯，如果在瀏覽器大小改變時，需要改變的樣式太多，那麼多套樣式**會很繁瑣。
響應式布局方法二：百分比%
比如當瀏覽器的寬度或者高度發生變化時，通過百分比單位，通過百分比單位可以使得瀏覽器中的元件的寬和高隨著瀏覽器的變化而變化，從而實現響應式的效果。
height,width屬性的百分比依託于父標籤的寬高。但是，padding、border、margin等屬性的情況又不一樣？
子元素的top和bottom如果設定百分比，則相對於直接非static定位(預設定位)的父元素的高度，同樣，子元素的left和right如果設定百分比，則相對於直接非static定位(預設定位的)父元素的寬度。
子元素的padding如果設定百分比，不論是垂直方向或者是水平方向，都相對於直接父親元素的width，而與父元素的height無關。
子元素的margin如果設定成百分比，不論是垂直方向還是水平方向，都相對於直接父元素的width
border-radius不一樣，如果設定border-radius為百分比，則是相對於自身的寬度
缺點計算困難，如果我們要定義乙個元素的寬度和高度，按照設計稿，必須換算成百分比單位。
各個屬性中如果使用百分比，相對父元素的屬性並不是唯一的。比如width和height相對于父元素的width和height，而margin、padding不管垂直還是水平方向都相對比父元素的寬度、border-radius則是相對於元素自身等等，造成我們使用百分比單位容易使布局問題變得複雜。
所以，不建議用%來做響應式布局。
響應式布局方法三：vw/vh
css3中引入了乙個新的單位vw/vh，與檢視視窗有關，vw表示相對於檢視視窗的寬度，vh表示相對於檢視視窗高度。
任意層級元素，在使用vw單位的情況下，1vw都等於檢視寬度的百分之一。
與百分比布局很相似，但更好用。
響應式布局方法四：rem
rem單位是相對於字型大小的html元素，也稱為根元素。
預設情況下，html元素的font-size為16px。所以此時1rem = 16px。
第一版@media screen and (max-width: 414px)
}@media screen and (max-width: 375px)
}@media screen and (max-width: 320px)
}複製**利用rem和**查詢，在解析度發生變換時，給它不同的font-size。
優化版//動態為根元素設定字型大小
function init ()
//首次載入應用，設定一次
init()
// 監聽手機旋轉的事件的時機，重新設定
window.addeventlistener(『orientationchange』, init)
// 監聽手機視窗變化，重新設定
window.addeventlistener(『resize』, init)
複製**理解：上面**實現了，無論裝置可視視窗如何變化，始終設定rem為width的1/10.即實現了百分比布局。就沒有第一版的**查詢那樣僵硬。
以上**需在dom之前寫入（可放在head裡面第乙個script標籤）
利用ui框架實現響應式布局
其實，現在的主流ui框架都會考慮到響應式布局這個問題，比如elementui，iview等框架提供了柵格系統，搭配來實現響應式布局。
所以在工作中直接拿來使用就完事了。
移動端響應式布局 viewport
複製** width=device-width: 是自適應手機螢幕的尺寸寬度。 maximum-scale:是縮放比例的最大值。 minimum-scale:是縮放比例的最小值。 inital-scale:是縮放的初始化。 user-scalable:是使用者的可以縮放的操作。
flexible.js
flexible.js是阿里手淘團隊開發的。用來解決移動端的適配問題。
假設現在要適配乙個iphone6的裝置。
設計師給了乙個750px寬度的設計稿（注意這裡是750px而不是375px）
前端工程師用750px的這個比例開始還原
把寬高是px的轉換成rem
字型使用px而不使用rem
flexible.js會自動判斷dpr進行整個布局視口的放縮
至於flexible.js怎麼使用的可以自行搜尋，因為本人移動端做得少，就不再多說了。
響應式布局總結
言歸正傳，博主因為是刨根問底攔不組的，所以在此就往響應式設計的祖墳上刨，深入了解下這四個步驟。1.布局及設定meta標籤 當建立乙個響應式 或者非響應式 變成響應式的時候，首先要關注元素的布局。我在建立響應式布局的時候習慣先寫非響應式布局，頁面固定寬度大小，我覺得這個對在座的各位沒有任何難度。如果完...
響應式布局總結
言歸正傳，博主因為是刨根問底攔不組的，所以在此就往響應式設計的祖墳上刨，深入了解下這四個步驟。1.布局及設定meta標籤 當建立乙個響應式 或者非響應式 變成響應式的時候，首先要關注元素的布局。我在建立響應式布局的時候習慣先寫非響應式布局，頁面固定寬度大小，我覺得這個對在座的各位沒有任何難度。如果完...
（總結）flex layout響應式布局
css3引入了一種新的布局模型 flexbox布局 即為flexible box伸縮布局盒模型 flefxbox布局的主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 flex容器會使子專案 伸縮專案 擴充套件來填滿可...