在這之前做web app開發的的時候，在自適應方面一般都是寬度通過百分比，高度以iPhone6跟iPhone5之間的一個平衡值寫死，我們的設計稿都是iPhone5的640 * 1136標準，所以高度一般取個大概值，各種圖示的寬高也是取平衡值寫死，然後部分樣式通過媒體查詢來設定，例如背景圖的多倍圖、基礎字型大小、圖示寬高。

這樣做的弊端很明顯： 1. 做出來的頁面在各種手機端看起來的物理大小（高度）是一樣的，所以在大屏手機會覺得頁面稍小，小屏手機頁面稍大 2. 如果要使高度能更好的適應各種手機螢幕，需要寫太多的媒體查詢樣式，效率低下 3. 全屏背景圖片跟頁面元素需要耦合時，元素位置的確定尤為困難（可能需要通過百分比去確定元素的橫向位置，但始終會有誤差） 

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

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

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

假如通過媒體查詢設定font-size，只能解決一部分的情況，而且並不能完成適配，因為手機螢幕寬度型別實在太多了，所以font-size的取值要通過js計算，取當前viewport的deviceWidth與設計稿的寬的 比例值，例如：我們的設計稿尺寸都是640px的，iphone5的deviceWidth

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 / 640 * 100 + 'px';
        // 等價於html.style.fontSize = windowWidth / 6.4 + 'px';
    }, false);
})();

// 這個640就是根據設計稿的橫向寬度來確定的，假如你的設計稿是750
// 那麼 html.style.fontSize = windowWidth / 750 * 100 + '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跟設計稿的橫向寬 的 比例 自動計算出來。【這裡不 除以2是因為它是根據640或者750來算的】

(3)關於背景圖片的錯位問題

如果是用的雪碧圖（就是將很多很多的小圖示放在一張圖片上,就稱之為雪碧圖），通過換算rem設定background-size跟background-position的時候，在一些手機型號下會出現背景圖錯位的情況，如下圖：

解決方法：

1.去掉預設背景圖，寫background:none

.icon-fix {
    background: none;
    position: relative;
    overflow: hidden;
}

2.使用偽元素，將背景圖放大100倍，定位位置也放大100倍，之後再將偽元素縮小100倍，這樣提高了size跟position的精度，就會解決這個問題了。

當然單個圖片，這個時候就不存在background-position的需要，只需設定background-size: contain;即可，這樣做的弊端就在於無法使用雪碧圖，圖片請求增多，適用於頁面圖示較少的情況

淘寶和網易案例詳細說明，以及移動端適配詳細說明，請參考網址：https://www.cnblogs.com/Charliexie/p/6900640.html