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

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

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

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

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

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

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

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

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

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

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

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

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

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

缺點

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

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

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

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

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

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

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

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

優(yōu)化版

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

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

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

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

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

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

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

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

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

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