響應式佈局有幾種方法

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

本文操作環境：巨集基底S40-51、Windows10家庭中文版

推薦：css影片教學

響應式佈局有的方法有：

#回應式佈局方法一：媒體查詢

使用@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

響應式佈局方法三：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 ，這幾個屬性分別從項目的排序、項目放大比例、項目縮小比例、項目佔據主軸空間、單一項目在交叉軸上的對齊方式來規範了項目本身的彈性。 ###

想了解更多程式設計學習，請關注php培訓欄位！

以上是響應式佈局有幾種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！