這篇文章主要介紹了響應(yīng)式布局的方法有哪些，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司，提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)，網(wǎng)頁設(shè)計(jì)，建網(wǎng)站，PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);可快速的進(jìn)行網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展；專業(yè)做搜索引擎喜愛的網(wǎng)站，是專業(yè)的做網(wǎng)站團(tuán)隊(duì)，希望更多企業(yè)前來合作!

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

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

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

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

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

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

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

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

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

• 子元素的padding如果設(shè)置百分比，不論是垂直方向或者是水平方向，都相對(duì)于直接父親元素的width，而與父元素的height無關(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ì)于元素自身等等，造成我們使用百分比單位容易使布局問題變得復(fù)雜。

所以，不建議用%來做響應(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)聽手機(jī)旋轉(zhuǎn)的事件的時(shí)機(jī)，重新設(shè)置
window.addEventListener('orientationchange', init)
// 監(jiān)聽手機(jī)窗口變化，重新設(shè)置
window.addEventListener('resize', init)

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

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

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

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

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

彈性布局在父、子元素上都有相對(duì)應(yīng)的屬性來規(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ì)齊方式來規(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ì)齊方式來規(guī)范了項(xiàng)目自身的彈性。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“響應(yīng)式布局的方法有哪些”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!