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

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

下面我們來分析下如何實現(xiàn)上述 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%;
  }
}

我們根據(jù)設備的寬度把設備分為三個區(qū)間，分別為：

小于576px
576px~1024px
大于1024px

默認樣式針對移動端編寫，減少匹配規(guī)則，加快移動端的解析。當設備寬度大于 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

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

rem 是一個根據(jù) 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 向左移動兩位小數(shù)點，換算起來非常方便。

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

當然有關系啦，我們可以讓 html 的 font-size 基于 iPhone6 等比例縮放，這樣就能實現(xiàn)對 5s、6p 的適配。來看一段代碼：

var clientWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = (clientWidth / 750) * 100 + "px";

計算出當前設備的寬度基于 750 的尺寸，按比例換算成 px，實現(xiàn)不同尺寸的手機設置等比例的 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";
}

最終實現(xiàn)了：

小于576px
576px~1024px
大于1024px

總結，真實的項目中往往比這復雜的多，這個時候就需要把三端的設計稿拿過來仔細分析一下，哪些是可以抽象成一個 DOM 結構，清晰的 DOM 結構會讓你的實現(xiàn)更加清晰。 附上本文的完整 Demo，也就是一開始的截圖。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論