基於媒體查詢和 rem 的響應式佈局實踐

lnyx發表於2018-07-28
REM

本文首發於 dawei.lv

媒體查詢 @media

我們開發一個網站的時候希望在手機端、iPad 端、PC 端都有良好的體驗，CSS 給我們提供了一個強大的條件判斷語法，可以根據裝置的寬度來設定不同的樣式，從而實現不同的裝置應用不同的佈局。

下圖展示了利用 @media 實現的同一頁面手機端 2 列、iPad 端 3 列、PC 端 4 列的佈局。

layout

下面我們來分析下如何實現上述 Demo。

<div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
複製程式碼
.grid {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 50%;
}

@media (min-width: 576px) {
  .item {
    width: 33.333%;
  }
}

@media (min-width: 1024px) {
  .item {
    width: 25%;
  }
}
複製程式碼

我們根據裝置的寬度把裝置分為三個區間，分別為：

  • 小於576px 移動端區間
  • 576px~1024px 平板區間
  • 大於1024px PC 端區間

預設樣式針對移動端編寫，減少匹配規則，加快移動端的解析。當裝置寬度大於 576px 時，就匹配到了 @media (min-width: 576px)，此時 width: 33.333%; 會將原來的 50% 覆蓋掉，顯示為 3 列。當裝置寬度大於 1024px 時，就匹配到了 @media (min-width: 1024px)，此時 width: 25%; 進一步覆蓋掉原來的 33.333%，顯示為 4 列。

通過合理的佈局 DOM 結構，可以讓不同裝置的瀏覽效果完全不同。配合 flex 佈局的 order 屬性，DOM 間的位置交換變得更加簡單。

REM

我們使用三個斷點解決了不同端的佈局問題，但這只是第一步。我們現在還是用的 px 做單位，設計師給我們出的 iPhone6 的設計稿，一個按鈕 80px 寬度，iPhone6 上可以這麼寫。iPhone5s 空間不足導致換行、iPhone6 Plus 留白怎麼辦？這時候就要召喚出我們的大殺器 rem 了。

rem 是一個根據 html 根元素 font-size 計算的相對單位。元素實際尺寸 = 元素 rem 值 x html 的 font-size 值。也就是說當 html 的 font-size 設定為 50px 時，2rem 的元素實際尺寸就是 100px。

我司設計師通常使用 2 倍的 iPhone6 作為設計稿。iPhone6 設計稿的寬度為750px，對應實際尺寸350px。為了方便換算，我們將 html 的 font-size 設定為 50px，實際尺寸 100px = 2rem。而這 2rem 正好等於設計稿上的 200 向左移動兩位小數點，換算起來非常方便。

你說的我都懂，但這跟 5s、6p 適配有什麼關係呢？？

當然有關係啦，我們可以讓 html 的 font-size 基於 iPhone6 等比例縮放，這樣就能實現對 5s、6p 的適配。來看一段程式碼：

var clientWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = (clientWidth / 750) * 100 + "px";
複製程式碼

計算出當前裝置的寬度基於 750 的尺寸，按比例換算成 px，實現不同尺寸的手機設定等比例的 html font-size。

我們看下實際效果圖：

layout2

將 @media rem 結合起來

將之前講的兩點結合起來，程式碼如下：

var clientWidth = document.documentElement.clientWidth;
if (clientWidth < 575) {
  document.documentElement.style.fontSize = (clientWidth / 750) * 100 + "px";
} else if (clientWidth < 1024) {
  // 豎版 iPad 的 2x 尺寸
  document.documentElement.style.fontSize = (clientWidth / 1536) * 100 + "px";
} else {
  document.documentElement.style.fontSize = "50px";
}
複製程式碼

最終實現了：

  • 小於576px 移動端區間，按 iPhone6 等比縮放，2 列布局
  • 576px~1024px 平板區間，按豎版 iPad 等比縮放，3 列布局
  • 大於1024px PC 端區間，不縮放。4 列布局

總結，真實的專案中往往比這複雜的多，這個時候就需要把三端的設計稿拿過來仔細分析一下，哪些是可以抽象成一個 DOM 結構，清晰的 DOM 結構會讓你的實現更加清晰。 附上本文的完整 Demo，也就是一開始的截圖。 另外更復雜的實現可以參考下我司官網 www.bstcine.com 。

相關文章