移動端適配-Rem 佈局篇

這是一個系列文章，分 3 篇：

• 移動端適配 - 基礎知識篇
  
• 移動端適配 - 實踐篇
  
• 移動端適配- Rem 佈局篇
  

前面寫過一篇移動端適配實踐的文章，很長，內容太多，看得容易凌亂，從新寫個通熟易懂版的。

爲何要自適應？

好比，對於一個移動端頁面，設計師給的視覺稿畫布寬 750，視覺稿中的一個黃色區塊的尺寸是 702 x 300，並在畫板中居中。咱們但願在任何一個設備中的呈現比例都與視覺稿中同樣，根據佈局視口寬度等比縮放。

在移動端咱們通常會設置佈局視口寬度=設備寬度，即內容呈現的區域在設備屏幕內。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
複製代碼

但不一樣設備的寬度不一樣，於是讓佈局視口的寬度也不一樣。好比 iPhone 6 的佈局視口寬度爲 375， iPhone6 Plus 佈局視口的寬度爲 414。

對於給定的畫布寬 750 的視覺稿，若是在佈局視口寬度爲 375 的 iPhone 6 設備上呈現，咱們能夠將視覺稿中元素的像素值除以 2，代碼以下：

.box{
    width: 351px;
    height: 150px;
    margin-top: 40px;
    background: #F5A623;
}
複製代碼

那麼在 iPhone 6 中的呈現如右圖，與左圖視覺稿佈局一致。

但一樣的代碼，在  iPhone 6 Plus 中呈現的就不同了，兩側間距變大。由於  iPhone 6 Plus 的佈局視口比 iPhone 6 要寬，而矩形框的尺寸沒有變， 依然是 315 x 150。

對於給定的畫布寬 750 的視覺稿，若是在佈局視口寬度爲 414 的 iPhone 6 Plus 設備上呈現，咱們能夠將視覺稿中元素的像素值按比例除以 (750 / 414)，即:

.box{
    width: 387.5px;
    height: 165.6px;
    margin-top: 44.2px;
    background: #F5A623;
}
複製代碼

頁面呈現效果也能夠跟視覺稿同樣了。

爲了在不一樣設備寬度（不一樣視口寬度）的頁面中呈現效果跟視覺稿同樣，須要寫不一樣的 CSS 像素值。 咱們的訴求是但願能用一樣的 CSS 代碼在不一樣寬度的設備上展示效果與視覺稿相同，通俗的說就是按照視覺稿中元素與畫布的尺寸比例在不一樣設備上等比縮放，從而達到在不一樣設備上自適應的效果。

使用 Rem 佈局解決自適應問題

如何用同一份 CSS 代碼，使元素尺寸隨着佈局視口寬度的變化按視覺稿中的比例等比縮放？咱們結合 CSS 中相對單位 rem 的特性，rem 單位的像素值是相對於根元素(HTML 元素) 的 font-size 的。例如：HTML 的 font-size 爲 100px， 在 CSS 樣式中設置某一元素的寬度爲 2rem， 那麼此元素在頁面中的寬度爲 200px。

根據元素在視覺稿中的比例等比縮放找到這樣一層關係：

視覺稿元素尺寸 / 視覺稿畫布寬度  
= (rem 值 * HTML 元素的 font-size) / 佈局視口寬度 
= rem 值 * (HTML 元素的 font-size / 佈局視口寬度)
= rem 值 / (佈局視口寬度  /  HTML 元素的 font-size)
複製代碼

若是：

佈局視口寬度  /  HTML 元素的 font-size = 定值 N
複製代碼

就能夠用同一份 CSS 代碼實如今任何設備中自適應。

rem 值 = N * (視覺稿元素尺寸 / 視覺稿畫布寬度 )
複製代碼

因此，咱們只要肯定一個 N 值，再完成兩步，便可實現自適應：

• 第 1 步：動態設置 HTML 元素的 font-size = 佈局視口寬度 / N
• 第 2 步：將視覺稿中導出的元素 CSS 像素值轉成 rem 單位: rem 值 = N * (視覺稿元素尺寸 / 視覺稿畫布寬度 )

假如您的視覺稿畫布寬度是 750，爲了便於 rem 值的計算， 您能夠選擇設置 N = 7.5， 這樣只須要將視覺稿中的尺寸值除以 100 就能夠獲得 rem 單位的 CSS 像素值。