響應(yīng)式布局有的方法有：1、媒體查詢；2、百分比【%】；3、vw或vh，vw表示相對(duì)于視圖窗口的寬度，vh表示相對(duì)于視圖窗口高度；4、rem單位是相對(duì)于字體大小的html元素；5、flex彈性布局。

本教程操作環(huán)境：windows10系統(tǒng)、css3版，DELL G3電腦，該方法適用于所有品牌電腦。

推薦：css視頻教程

響應(yīng)式布局有的方法有：

響應(yīng)式布局方法一：媒體查詢

使用@media媒體查詢可以針對(duì)不同的媒體類型定義不同的樣式，特別是響應(yīng)式頁(yè)面，可以針對(duì)不同屏幕的大小，編寫(xiě)多套樣式，從而達(dá)到自適應(yīng)的效果。舉例來(lái)說(shuō)：

通過(guò)媒體查詢，可以通過(guò)給不同分辨率的設(shè)備編寫(xiě)不同的樣式來(lái)實(shí)現(xiàn)響應(yīng)式的布局，比如我們?yōu)椴煌直媛实钠聊?，設(shè)置不同的背景圖片。比如給小屏幕手機(jī)設(shè)置@2x圖，為大屏幕手機(jī)設(shè)置@3x圖，通過(guò)媒體查詢就能很方便的實(shí)現(xiàn)。

但是媒體查詢的缺點(diǎn)也很明顯，如果在瀏覽器大小改變時(shí)，需要改變的樣式太多，那么多套樣式代碼會(huì)很繁瑣。

響應(yīng)式布局方法二：百分比%

比如當(dāng)瀏覽器的寬度或者高度發(fā)生變化時(shí)，通過(guò)百分比單位，通過(guò)百分比單位可以使得瀏覽器中的組件的寬和高隨著瀏覽器的變化而變化，從而實(shí)現(xiàn)響應(yīng)式的效果。

height,width屬性的百分比依托于父標(biāo)簽的寬高。但是，padding、border、margin等屬性的情況又不一樣

• 子元素的padding如果設(shè)置百分比，不論是垂直方向或者是水平方向，都相對(duì)于直接父親元素的width，而與父元素的height無(wú)關(guān)。

• 子元素的margin如果設(shè)置成百分比，不論是垂直方向還是水平方向，都相對(duì)于直接父元素的width

• border-radius不一樣，如果設(shè)置border-radius為百分比，則是相對(duì)于自身的寬度

缺點(diǎn)

計(jì)算困難，如果我們要定義一個(gè)元素的寬度和高度，按照設(shè)計(jì)稿，必須換算成百分比單位。

各個(gè)屬性中如果使用百分比，相對(duì)父元素的屬性并不是唯一的。比如width和height相對(duì)于父元素的width和height，而margin、padding不管垂直還是水平方向都相對(duì)比父元素的寬度、border-radius則是相對(duì)于元素自身等等，造成我們使用百分比單位容易使布局問(wèn)題變得復(fù)雜。

所以，不建議用%來(lái)做響應(yīng)式布局。

響應(yīng)式布局方法三：vw/vh

css3中引入了一個(gè)新的單位vw/vh，與視圖窗口有關(guān)，vw表示相對(duì)于視圖窗口的寬度，vh表示相對(duì)于視圖窗口高度。 任意層級(jí)元素，在使用vw單位的情況下，1vw都等于視圖寬度的百分之一。

與百分比布局很相似，但更好用。

響應(yīng)式布局方法四：rem

rem單位是相對(duì)于字體大小的html元素，也稱為根元素。 默認(rèn)情況下，html元素的font-size為16px。所以此時(shí)1rem = 16px。

優(yōu)化版

//動(dòng)態(tài)為根元素設(shè)置字體大小 function init () {  // 獲取屏幕寬度  var width = document.documentElement.clientWidth  // 設(shè)置根元素字體大小。此時(shí)為寬的10等分  document.documentElement.style.fontSize = width / 10 + 'px' } //首次加載應(yīng)用，設(shè)置一次 init() // 監(jiān)聽(tīng)手機(jī)旋轉(zhuǎn)的事件的時(shí)機(jī)，重新設(shè)置 window.addEventListener('orientationchange', init) // 監(jiān)聽(tīng)手機(jī)窗口變化，重新設(shè)置 window.addEventListener('resize', init)

理解：上面代碼實(shí)現(xiàn)了，無(wú)論設(shè)備可視窗口如何變化，始終設(shè)置rem為width的1/10.即實(shí)現(xiàn)了百分比布局。就沒(méi)有第一版的媒體查詢那樣僵硬。

以上代碼需在dom之前寫(xiě)入（可放在head里面第一個(gè)script標(biāo)簽）

響應(yīng)式布局方法五：flex彈性布局

彈性布局是一種十分方便的，只需要依賴于CSS樣式的實(shí)現(xiàn)響應(yīng)式布局的方式，也是最多用到的一種實(shí)現(xiàn)響應(yīng)式的方法。

尤其是現(xiàn)在類似于某寶、某東一類的電商web站或者手機(jī)app的頁(yè)面，利用彈性布局是都可以很輕松的實(shí)現(xiàn)的。

彈性布局在父、子元素上都有相對(duì)應(yīng)的屬性來(lái)規(guī)范子元素在父元素中的“彈力”。

• 在父元素上，我們經(jīng)常會(huì)用到的有關(guān)彈性布局的屬性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content ，這幾個(gè)屬性分別從 主軸的方向、是否換行、項(xiàng)目在主軸上的對(duì)齊方式、項(xiàng)目在交叉軸上的對(duì)齊方式、項(xiàng)目在多根軸線上的對(duì)齊方式來(lái)規(guī)范了項(xiàng)目在父元素中的彈性。

• 在子元素上，我們經(jīng)常會(huì)用到的有關(guān)彈性布局的屬性主要有 order , flex-grow , flex-shrink ,flex-basis , align-self ，這幾個(gè)屬性分別從 項(xiàng)目的排序、項(xiàng)目放大比例、項(xiàng)目縮小比例、項(xiàng)目占據(jù)主軸空間、單個(gè)項(xiàng)目在交叉軸上的對(duì)齊方式來(lái)規(guī)范了項(xiàng)目自身的彈性。