目前主流的移動端適配用rem的偏多蟋定，接下來說一說關(guān)于rem的適配問題吧草添。。。
需要的功能：設(shè)計圖用于不同的設(shè)備犀盟，效果等比例縮放。
rem是一個新的單位，該單位與HTML頁面的fontSize有關(guān)倡怎，1px=?rem,是通過html的font-size進行決定的，font-size為多少监署，那么1rem就為多少px;（在我們的項目中1rem=100px）rem 是相對于根標(biāo)簽的。
一般的設(shè)計稿為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等等一系列的，當(dāng)手機適口不一樣的時候這個比例就不同褒翰。用rem做適配，是通過手機適口的寬度/設(shè)計圖优训，然后將這個值動態(tài)設(shè)置為font-size的值各聘，因為得到的是小數(shù)，這時設(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倍比的情況下，設(shè)計圖100px的一個div,那么我們就可以寫成1rem,用100除以100得出衡怀，那么如是是2.342這個比例的話，作為程序員的我們不可能拿一個計算器抛杨，一個div一個div的計算轉(zhuǎn)化之后的rem值,這樣太費勁量。初中數(shù)學(xué)有個公式茁帽，倒數(shù)的概念玉罐，除以一個數(shù)等于乘這個數(shù)的倒數(shù)潘拨，比如除以2等于??二分之一，從計算的角度來說方便了很多铁追，所以我們可以將除法改為乘法，但是還有個問題琅束，手機適口的寬度除以750px 得到的是一個小數(shù)，將這個小數(shù)給font-size設(shè)置是不管用的狰闪，因為font-size最小為12px,所以我們可以給我這個小數(shù)乘以100埋泵，那么在實際測量的時候子再給測量的數(shù)除以100，就達(dá)到了我們所說的量的數(shù)除以100丽声，等于我們設(shè)計圖上的尺寸。所以100px=1rem雁社。
用測量的尺寸除以100，主要的目的是使得比例是一樣的霉撵。這樣才能等比例的縮放。
