響應式布局的方法有哪些

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

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

響應式布局的方法有：

響應式布局方法一：媒體查詢

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

通過媒體查詢，可以通過給不同分辨率的設備編寫不同的樣式來實現響應式的布局，比如我們為不同分辨率的屏幕，設置不同的背景圖片。比如給小屏幕手機設置@2x圖，為大屏幕手機設置@3x圖，通過媒體查詢就能很方便的實現。

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

響應式布局方法二：百分比%

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

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

• 子元素的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。

優化版

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

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

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

響應式布局方法五：flex彈性布局

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

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

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

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

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

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