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

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

下面我們來(lái)分析下如何實(shí)現(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ù)設(shè)備的寬度把設(shè)備分為三個(gè)區(qū)間，分別為：

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

默認(rèn)樣式針對(duì)移動(dòng)端編寫(xiě)，減少匹配規(guī)則，加快移動(dòng)端的解析。當(dāng)設(shè)備寬度大于 576px 時(shí)，就匹配到了 @media (min-width: 576px) ，此時(shí) width: 33.333%; 會(huì)將原來(lái)的 50% 覆蓋掉，顯示為 3 列。當(dāng)設(shè)備寬度大于 1024px 時(shí)，就匹配到了 @media (min-width: 1024px) ，此時(shí) width: 25%; 進(jìn)一步覆蓋掉原來(lái)的 33.333% ，顯示為 4 列。

通過(guò)合理的布局 DOM 結(jié)構(gòu)，可以讓不同設(shè)備的瀏覽效果完全不同。配合 flex 布局的 order 屬性，DOM 間的位置交換變得更加簡(jiǎn)單。

REM

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

rem 是一個(gè)根據(jù) html 根元素 font-size 計(jì)算的相對(duì)單位。 元素實(shí)際尺寸 = 元素 rem 值 x html 的 font-size 值 。也就是說(shuō)當(dāng) html 的 font-size 設(shè)置為 50px 時(shí)，2rem 的元素實(shí)際尺寸就是 100px。

我司設(shè)計(jì)師通常使用 2 倍的 iPhone6 作為設(shè)計(jì)稿。iPhone6 設(shè)計(jì)稿的寬度為 750px ，對(duì)應(yīng)實(shí)際尺寸 350px 。為了方便換算，我們將 html 的 font-size 設(shè)置為 50px ，實(shí)際尺寸 100px = 2rem 。而這 2rem 正好等于設(shè)計(jì)稿上的 200 向左移動(dòng)兩位小數(shù)點(diǎn)，換算起來(lái)非常方便。

你說(shuō)的我都懂，但這跟 5s、6p 適配有什么關(guān)系呢？？

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

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

計(jì)算出當(dāng)前設(shè)備的寬度基于 750 的尺寸，按比例換算成 px，實(shí)現(xiàn)不同尺寸的手機(jī)設(shè)置等比例的 html font-size。

我們看下實(shí)際效果圖：

將 @media rem 結(jié)合起來(lái)

將之前講的兩點(diǎn)結(jié)合起來(lái)，代碼如下：

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";
}

最終實(shí)現(xiàn)了：

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

總結(jié)，真實(shí)的項(xiàng)目中往往比這復(fù)雜的多，這個(gè)時(shí)候就需要把三端的設(shè)計(jì)稿拿過(guò)來(lái)仔細(xì)分析一下，哪些是可以抽象成一個(gè) DOM 結(jié)構(gòu)，清晰的 DOM 結(jié)構(gòu)會(huì)讓你的實(shí)現(xiàn)更加清晰。 附上本文的完整 Demo，也就是一開(kāi)始的截圖。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論