rem適配
rem是相對于根元素的字體大小的單位，也就是html的font-size大小，瀏覽器默認的字體大小是16px，所以默認的1rem=16px，我們可以根據(jù)設備寬度動態(tài)設置根元素的font-size，使得以rem為單位的元素在不同終端上以相對一致的視覺效果呈現(xiàn)。
事實上 rem是把屏幕等分成 指定的份數(shù)，以20份為例，每份為 1rem ， 1rem 對應的大小就是 rem基準值 ，rem做的就是把 rem基準值 給<html>的 font-size ，所以如果設備的 物理像素 寬為 640px ，分成20份，那么 1rem=640px/20=32px , <html>的 font-size為32px
//這段代碼放在head標簽里面
(function () {
? ? var html = document.documentElement;
? ? function onWindowResize() {
? ? ? ? html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px';
? ? }
? ? window.addEventListener('resize', onWindowResize);
? ? onWindowResize();
})();
當然，你也可以分成30份，40份，60份等等，這個看自己的喜好了
在我們實際切圖的時候，對于視覺稿上的元素尺寸換算，只需要元素的 原始的px值(即你量的大小) 除以 rem基準值 即可。例如設計稿的大小為640px， rem基準值 = 640px/20 = 32px ，有個元素的大小你量出來是 140px286px* ，那么換算過來就是:
140px = 140/32 = 4.375rem
286px = 286/32 = 8.9375rem
這樣我們就可以用rem來代替像素px了， 而且在所有的移動端都是自適應的
這個方法目前是比較好的適配方法，只是rem在計算時很麻煩，有很多小數(shù)，這個時候大家可以試一下用less.js解決rem的小數(shù)問題
rem+vw適配
什么是vw和vh？
vw : 1vw 等于視口寬度的1%vh : 1vh 等于視口高度的1%vmin : 選取 vw 和 vh 中最小的那個vmax : 選取 vw 和 vh 中最大的那個
用視口單位度量，視口寬度為100vw，高度為100vh（左側(cè)為豎屏情況，右側(cè)為橫屏情況）
例如，在桌面端瀏覽器視口尺寸為650px，那么 1vw = 650 * 1% = 6.5px（這是理論推算的出，如果瀏覽器不支持0.5px，那么實際渲染結(jié)果可能是7px）
注意：這里的1%是指占視口的1%，而不是我們定義的div的1%
如何利用rem+vw進行屏幕適配呢？我們以設計稿為750px為基準
第一步：設置meta標簽
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
第二步：設置html的font-size大小
html{
? ? font-size:13.33333333vw
}
為什么 font-size=13.33333333vw?
下面分析下原理吧, 上面我們說了vw表示1%的屏幕寬度,而我們的設計稿通常是750px的,屏幕一共是100vw,對應750px,那么1px就是0.1333333vw,。
同時我們知道rem,rem是相對html元素的字體大小，為了方便計算,我們?nèi)tml的font-size=100px,通過上面的計算結(jié)果1px是0.13333333vw,那么100px就是13.333333vw了
div {
? width: 2rem;
? height:1.37rem;
}
這個時候，使用rem就不用去計算小數(shù)了
