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

本文首發於 dawei.lv

媒體查詢 @media

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

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

下面咱們來分析下如何實現上述 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。

咱們看下實際效果圖：

將 @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 。