移動端Web 關於單位rem的使用小結

　　最近寫了很多的h5頁面和web項目開發，可是對於自適應佈局的設置，團隊裏一直沒有一個統一的標準，也極可能真的沒有什麼標準，多是我對統一性執念太大。

　　在這以前作Web App開發的的時候，在自適應方面通常都是寬度經過百分比，高度以iPhone6跟iPhone5之間的一個平衡值寫死，咱們的設計稿都是iPhone5的640 * 1136標準，因此高度通常取個大概值，各類圖標的寬高也是取平衡值寫死，而後部分樣式經過媒體查詢來設置，例如背景圖的多倍圖、基礎字體大小、圖標寬高。

　　可是這樣作有一個問題，就是作出來的頁面在各類手機端看起來的物理大小（高度）是同樣的，因此在大屏手機會以爲頁面稍小，小屏手機頁面稍大。設計也常常找咱們修改字體大小，間距問題，哎。

　　有時候，會使用一些框架默認的單位設置，或自動化工具的智能設置。 我始終沒弄明白怎麼個算法，因此就扒拉些大神的文章，這裏經過本身的理解，寫個小結。

　　那麼html5該如何去作衆多移動設備的適配呢？爲了完成工做，咱們須要找尋更簡單更有效率的方法。

　　方案一：

　　（1）方案的簡單介紹: 基於rem

　　前提：頁面元素的佈局尺寸全都以設計稿爲基準等比例設置。

　　給html根節點設置一個基礎font-size值，而後頁面的全部元素佈局均相對於該font-size值採用rem單位設定。那麼基礎的font-size值該如何取呢？

　　假如經過媒體查詢設置font-size，只能解決一部分的狀況，並且並不能完成適配，由於手機屏幕寬度類型實在太多了，因此font-size的取值要經過js計算，取當前viewport的deviceWidth與設計稿的寬 的 比例值，例如：咱們的設計稿尺寸都是640px的，iphone5的deviceWidth是320px，那麼計算出來的font-size值就是 320 / 640 = 0.5，由於得出的font-size過小，不方便計算，且有的瀏覽器可能不兼容過小字號，因此將font-size放大100倍，因此最終計算出來的font-size爲 320 / 640 * 100 = 50(px); 固然，這個值是根據設計稿來計算的，因此根據計算規則，下面列出幾種常見設計稿相應的font-size值：

deviceWidth = 320，font-size = 320 / 6.4 = 50px
deviceWidth = 375，font-size = 375 / 6.4 = 58.59375px
deviceWidth = 414，font-size = 414 / 6.4 = 64.6875px
deviceWidth = 500，font-size = 500 / 6.4 = 78.125px

　　可在script標籤加上以下代碼：

(function () {
    document.addEventListener('DOMContentLoaded', function () {
        var html = document.documentElement;
        var windowWidth = html.clientWidth;
        html.style.fontSize = windowWidth / 6.4 + 'px';
        // 等價於html.style.fontSize = windowWidth / 640 * 100 + 'px';
    }, false);
})();
 
// 這個6.4就是根據設計稿的橫向寬度來肯定的，假如你的設計稿是750
// 那麼 html.style.fontSize = windowWidth / 7.5 + 'px';

　　至此，font-size的基礎值就肯定好了，並且知道該font-size值是手機deviceWidth跟設計稿的比例值 的 100倍（重要）

　　（2）那麼頁面元素該如何設置寬高、邊距

例如：一個設計稿寬高爲140px的圖標，左邊距爲50px，那麼它的css應該這樣寫

.icon {
    width: 1.4rem; /* 像素換算rem：140px / 100 = 1.4rem */
    height: 1.4rem;
    margin: 0 0 0 .5rem;
}

　　由於html的font-size是放大了100倍，因此計算rem時，要用設計稿的實際像素除以100，140px / 100 = 1.4rem; 最後實際的像素大小就會由deviceWidth跟設計稿的橫向寬 的 比例 自動計算出來。

　　可是，這暴露出了一個背景使用雪碧圖的一個弊端（因爲font-size小數點太多，計算出實際背景圖大小background-size跟背景圖位置background-position時瀏覽器精度不夠可能就會出現位置的誤差），經過換算rem設置background-size跟background-position的時候，在一些手機型號下會出現背景圖錯位的狀況，但是若是不用rem設置的話，又不能達到適配的目的。（background-size、background-position的rem換算方法跟前面講的寬高設定同樣，都是設計稿尺寸（這時應該是雪碧圖的原始尺寸）除以100倍）

　　最簡單的方法就是，不使用雪碧圖，使用單個背景圖，這個時候就不存在background-position的須要，只需設定background-size: contain;便可，這樣作的弊端就在於沒法使用雪碧圖，圖片請求增多，適用於頁面圖標較少的狀況。

　　方案二：

　　媒體查詢：

html {
    font-size: 10px
}
@media screen and (min-width: 321px) and (max-width: 375px) {
    html {
        font-size: 11px
    }
}
@media screen and (min-width: 376px) and (max-width: 414px) {
    html {
        font-size: 12px
    }
}
@media screen and (min-width: 415px) and (max-width: 639px) {
    html {
        font-size: 15px
    }
}
@media screen and (min-width: 640px) and (max-width: 719px) {
    html {
        font-size: 20px
    }
}
@media screen and (min-width: 720px) and (max-width: 749px) {
    html {
        font-size: 22.5px
    }
}
@media screen and (min-width: 750px) and (max-width: 799px) {
    html {
        font-size: 23.5px
    }
}
@media screen and (min-width: 800px) {
    html {
        font-size: 25px
    }
}　　

　　方案三：

<script>
        document.documentElement.style.fontSize = window.innerWidth/6.40 + 'px';
    </script>