目前主流的移動端適配用rem的偏多，接下來說一說關(guān)于rem的適配問題吧。。。

需要的功能：設計圖用于不同的設備，效果等比例縮放。

rem是一個新的單位，該單位與HTML頁面的fontSize有關(guān)，1px=?rem,是通過html的font-size進行決定的，font-size為多少，那么1rem就為多少px;（在我們的項目中1rem=100px）rem 是相對于根標簽的。

一般的設計稿為750px,也就是我們常說的2倍圖，但是手機適口的寬度一般為375px，歸納一下手機適口的范圍:

iphone4 320、360、iphon6 375、384、400、480、533、568、600、640、667、720、768、800、853、853、960、1024、1280、1366

劃分一下，大致是：

第一檔在小屏幕手機：320~384

第二檔在note/pad：400~900

第三檔在桌面端：960~

在實際項目中統(tǒng)計的結(jié)果表明，手機屏幕的寬度中的95%還在320~375寬。保證手機版畫面主體內(nèi)容在320寬內(nèi)即可。

js中我們需要動態(tài)獲取手機適口的寬度window.innerWidth。

原理:那么750/375=2; 750/320=2.343等等一系列的，當手機適口不一樣的時候這個比例就不同。用rem做適配，是通過手機適口的寬度/設計圖，然后將這個值動態(tài)設置為font-size的值，因為得到的是小數(shù)，這時設置給font-size是不管用的，(因為font-size最小為12px)，所以用這個小數(shù)先乘以100，最后用實際測量的數(shù)除以100，得到最終的rem的值。也就是測量為200px就寫成為 2rem.

(function(doc,win){?

? ? var docEl =doc.documentElement,?

? ? ? ? ? ? resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',?

? ? ? ? ? ? recalc = function(){?

? ? ? ? ? ? ? ? var clientWidth = docEl.clientWidth>750 ? 750 :docEl.clientWidth;?

? ? ? ? ? ? ? ? if (!clientWidth) {return};?

? ? ? ? ? ? ? ? docEl.style.fontSize = 100 * (clientWidth/750) + 'px';?

? ? ? ? ? ? };?

? ? recalc();?

? ? if (!doc.addEventListener) return;?

? ? win.addEventListener(resizeEvt, recalc, false);?

? ? doc.addEventListener('DOMContentLoaded', recalc, false);?

})(document,window)

那么舉例子：比如是2倍比的情況下，設計圖100px的一個div,那么我們就可以寫成1rem,用100除以100得出，那么如是是2.342這個比例的話，作為程序員的我們不可能拿一個計算器，一個div一個div的計算轉(zhuǎn)化之后的rem值,這樣太費勁量。初中數(shù)學有個公式，倒數(shù)的概念，除以一個數(shù)等于乘這個數(shù)的倒數(shù)，比如除以2等于??二分之一，從計算的角度來說方便了很多，所以我們可以將除法改為乘法，但是還有個問題，手機適口的寬度除以750px 得到的是一個小數(shù)，將這個小數(shù)給font-size設置是不管用的，因為font-size最小為12px,所以我們可以給我這個小數(shù)乘以100，那么在實際測量的時候子再給測量的數(shù)除以100，就達到了我們所說的量的數(shù)除以100，等于我們設計圖上的尺寸。所以100px=1rem。

用測量的尺寸除以100，主要的目的是使得比例是一樣的。這樣才能等比例的縮放。