手機端頁面自適應解決方案—rem佈局

一、爲何要使用rem？

手機頁面自適應，不一樣設備上看的效果更好，更精確。

• 引用簡單，佈局簡便
• 根據設備屏幕的DPR,自動設置最合適的高清縮放。
• 保證了不一樣設備下視覺體驗的一致性。（老方案是，屏幕越大元素越大；此方案是，屏幕越大，看的越多）
• 有效解決移動端真實1px問題（這裏的1px 是設備屏幕上的物理像素）

二、dpr什麼東東？

dpr叫設備像素比。設備像素比(簡稱dpr)定義了物理像素和設備獨立像素的對應關係
設備像素比＝物理像素／設備獨立像素 （在x方向或者y方向）。看完是否是一臉懵。哈哈，接着往下看唄。

1.物理像素（physical pixel）
一個物理像素是顯示器（手機屏幕）上最小的物理顯示物理單元，在操做系統的調度下，每個設備都有本身的顏色值和亮度值。

2.設備獨立像素（density-independent pixel）
設備獨立像素（也叫密度無關像素），能夠認爲是計算機座標系統中得一個點，這個點表明一個能夠由程序使用的虛擬像素（好比：css像素），而後由相關係統轉換爲物理像素。

其實就是簡單的理解爲平時咱們看設計稿時的px是以css像素定義的。

3.爲何是640px？

對於手機屏幕來講，640px的頁面寬度是一個安全的最大寬度，保證了移動端頁面兩邊不會留白。注意這裏的px是css邏輯像素，與設備的物理像素是有區別的。如iPhone 5使用的是Retina視網膜屏幕，使用2px x 2px的 device pixel 表明 1px x 1px 的 css pixel，因此設備像素數爲640 x 1136px，而它的CSS邏輯像素數爲320 x 568px。
若是要切移動端頁面，你能夠先把效果圖寬度等比例縮放到640px，很好用。

問：爲毛效果圖是要640或者750的，我非得弄個666的不行咩？

答：老實說固然能夠，不過爲了規範，640或者750是相對合適的。
拿Iphone 5s 舉例，它的css像素寬度是320px，因爲它的dpr=2，因此它的物理像素寬度爲320 × 2 = 640px，這也就是爲何，你在5s上截了一張圖，在電腦上打開，它的原始寬度是640px的緣由。
那 iphone 6 的截圖寬度呢？ 375 × 2 = 750
那 iphone 6 sp 的截圖寬度呢？ 414 × 3 = 1242
以此類推，你如今能明白效果圖爲何通常是 640 ，750 甚至是 1242 的緣由了麼？（真沒有歧視安卓機的意思。。。）

4問：不是 1rem = 100px嗎，爲何個人代碼寫了一個寬度爲3rem的元素，在電腦端的谷歌瀏覽器上寬度只有150px?

答：先說高清方案代碼，再次強調我們的高清方案代碼是根據設備的dpr動態設置html 的 font-size，
若是dpr=1(如電腦端），則html的font-size爲50px，也就是 1rem = 50px（我的習慣）
若是dpr=2(如iphone 5 和 6），則html的font-size爲100px，也就是 1rem = 100px
若是dpr=3(如iphone 6 sp），則html的font-size爲150px，也就是 1rem = 150px
若是dpr爲其餘值，即使不是整數，如3.4 , 也是同樣直接將dpr 乘以 50 。

再來講說效果圖，通常來說，咱們的效果圖寬度要麼是640，要麼是750，不管哪個，它們對應設備的dpr=2，此時，1 rem = 50 × 2 = 100px。這也就是爲何高清方案默認1rem = 100px。而將1rem默認100px也是好處多多，能夠幫你快速換算單位，好比在750寬度下的效果圖，某元素寬度爲53px，那麼css寬度直接設爲53/100=0.53rem了。

5.怎麼用rem？

rem佈局很是簡單，首頁你只需在頁面引入這段原生js代碼就能夠了

(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=640){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

技術參考：https://zhuanlan.zhihu.com/p/25552482/（推薦看）

http://www.jianshu.com/p/b00cd3506782