響應式佈局方法總結

你喜歡吃青椒麼發表於2019-11-09

定義

響應式佈局指的是同一頁面在不同螢幕尺寸下有不同的佈局。傳統的開發方式是PC端開發一套，手機端再開發一套，而使用響應式佈局只要開發一套就夠。

優點

  • 面對不同解析度裝置靈活性強
  • 能夠快捷解決多裝置顯示適應問題

缺點

  • 僅適用佈局、資訊、框架並不複雜的部門型別網站
  • 相容各種裝置工作量大，效率低下
  • 程式碼累贅，會出現隱藏無用的元素，載入時間加長
  • 其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果
  • 一定程度上改變了網站原有的佈局結構，會出現使用者混淆的情況

響應式與自適應區別

  • 響應式：只需要開發一套程式碼。 響應式設計通過檢測視口解析度，針對不同客戶端在客戶端做程式碼處理，來展現不同的佈局和內容。
  • 自適應：需要開發多套介面。 通過檢測視口解析度，來判斷當前訪問的裝置是：pc端、平板、手機，從而請求服務層，返回不同的頁面。

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

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

@media screen and (max-width: 960px){
    body{
      background-color:#FF6699
    }
}

@media screen and (max-width: 768px){
    body{
      background-color:#00FF66;
    }
}

@media screen and (max-width: 550px){
    body{
      background-color:#6633FF;
    }
}

@media screen and (max-width: 320px){
    body{
      background-color:#FFFF00;
    }
}
複製程式碼

上述的程式碼通過媒體查詢定義了幾套樣式，通過max-width設定樣式生效時的最大解析度，上述的程式碼分別對解析度在0～320px，320px～550px，550px～768px以及768px～960px的螢幕設定了不同的背景顏色。

通過媒體查詢，可以通過給不同解析度的裝置編寫不同的樣式來實現響應式的佈局，比如我們為不同解析度的螢幕，設定不同的背景圖片。比如給小螢幕手機設定@2x圖，為大螢幕手機設定@3x圖，通過媒體查詢就能很方便的實現。

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

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

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

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

  • 子元素的top和bottom如果設定百分比，則相對於直接非static定位(預設定位)的父元素的高度，同樣，子元素的left和right如果設定百分比，則相對於直接非static定位(預設定位的)父元素的寬度。
  • 子元素的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。

第一版

@media screen and (max-width: 414px) {
  html {
    font-size: 18px
  }
}

@media screen and (max-width: 375px) {
  html {
    font-size: 16px
  }
}

@media screen and (max-width: 320px) {
  html {
    font-size: 12px
  }
}
複製程式碼

利用rem和媒體查詢，在解析度發生變換時，給它不同的font-size。

優化版

//動態為根元素設定字型大小
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標籤）

利用UI框架實現響應式佈局

其實，現在的主流UI框架都會考慮到響應式佈局這個問題，比如elementUI，iview等框架提供了柵格系統，<row>搭配<col>來實現響應式佈局。 所以在工作中直接拿來使用就完事了。

移動端響應式佈局 viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
複製程式碼
  • width=device-width: 是自適應手機螢幕的尺寸寬度。
  • maximum-scale:是縮放比例的最大值。
  • minimum-scale:是縮放比例的最小值。
  • inital-scale:是縮放的初始化。
  • user-scalable:是使用者的可以縮放的操作。

這個寫法是使用者不能縮放的頁面設計。因為，如果頁面能縮放的話，就會影響使用者的體驗，在手機端，我們都可以找到點選的按鈕或者自己感興趣的選單進行操作。其二：就是我們如果讓頁面縮放的話，就完全暴露了我們手機app的程式是html的架構了。所以，我們專為移動端的設計頁面的時候，就不需要使用者進行縮放了。

flexible.js

flexible.js是阿里手淘團隊開發的。用來解決移動端的適配問題。

  • 假設現在要適配一個iphone6的裝置。

    • 設計師給了一個750px寬度的設計稿（注意這裡是750px而不是375px）
    • 前端工程師用750px的這個比例開始還原
    • 把寬高是px的轉換成rem
    • 字型使用px而不使用rem
    • flexible.js會自動判斷dpr進行整個佈局視口的放縮

    至於flexible.js怎麼使用的可以自行搜尋，因為本人移動端做得少，就不再多說了。

參考文章

前端移動端適配總結

前端響應式佈局原理與方案（詳細版

響應式佈局的常用解決方案對比(媒體查詢、百分比、rem和vw/vh）

歡迎訪問我的部落格

相關文章