1.先說(shuō)說(shuō)幾個(gè)前端常用的幾個(gè)單位的概論：
- 1、px (pixel，像素)：是一個(gè)虛擬長(zhǎng)度單位直晨，是計(jì)算機(jī)系統(tǒng)的數(shù)字化圖像長(zhǎng)度單位，如果px要換算成物理長(zhǎng)度膨俐，需要指定精度DPI(Dots Per Inch抡秆，每英寸像素?cái)?shù))，在掃描打印時(shí)一般都有DPI可選吟策。Windows系統(tǒng)默認(rèn)是96dpi儒士，Apple系統(tǒng)默認(rèn)是72dpi。
- 2檩坚、em(相對(duì)長(zhǎng)度單位着撩，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸)：是一個(gè)相對(duì)長(zhǎng)度單位诅福，最初是指字母M的寬度，故名em⊥闲穑現(xiàn)指的是字符寬度的倍數(shù)氓润，用法類似百分比，如：0.8em, 1.2em,2em等薯鳍。通常1em=16px咖气。
- 3、pt (point挖滤，磅)：是一個(gè)物理長(zhǎng)度單位崩溪，指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
- 4斩松、rem（root em伶唯，根em）：是CSS3新增的一個(gè)相對(duì)單位，這個(gè)單位引起了廣泛關(guān)注惧盹。這個(gè)單位與em有什么區(qū)別呢乳幸？區(qū)別在于使用rem為元素設(shè)定字體大小時(shí)，相對(duì)大小對(duì)比的是HTML根元素钧椰。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身粹断，通過(guò)它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)嫡霞。目前姿染，除了IE8及更早版本外，所有瀏覽器均已支持rem秒际。對(duì)于不支持它的瀏覽器悬赏，應(yīng)對(duì)方法也很簡(jiǎn)單，就是多寫一個(gè)絕對(duì)單位的聲明娄徊。這些瀏覽器會(huì)忽略用rem設(shè)定的字體大小闽颇。
2.開始進(jìn)入rem教程
1.先設(shè)置header里面的meta標(biāo)簽：
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
2.在header寫上<script>標(biāo)簽
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
</script>
問(wèn)題：為什么要設(shè)置Html的font-size？
答：這里是設(shè)置html標(biāo)簽的font-size寄锐，上面概論紅色字寫的很清晰兵多，頁(yè)面元素使用rem單位時(shí)，是相對(duì)于這個(gè)html標(biāo)簽的font-size的大小為基礎(chǔ)的橄仆。
問(wèn)題：為什么是clientWidth/640?為什么要乘以100剩膘？
答：
- 是因?yàn)檫@里是作為一個(gè)基礎(chǔ)數(shù)值，換個(gè)方向去想盆顾，這里先不乘以100以免產(chǎn)生誤解怠褐。
例如：設(shè)計(jì)稿寬度是640px，有一個(gè)元素設(shè)計(jì)稿上的寬度是50px您宪，設(shè)備物理寬度是320px,那么我們?cè)陧?yè)面上應(yīng)該設(shè)置寬度為 width:50rem奈懒，相當(dāng)于寬度是：50*（320/640）=25px奠涌；這里能正確算出在320px的設(shè)備上剛好占一半,其實(shí)可以想象為 rem=（320/640）。
一般瀏覽器的最小字體是12px磷杏，如果html的font-size=（320/640）px溜畅，相當(dāng)于font-size=0.5px，那么這個(gè)數(shù)值就小于12px极祸，會(huì)造成一些計(jì)算的錯(cuò)誤慈格，和一些奇怪的問(wèn)題，*100后遥金，font-size是50px浴捆，就可以解決這種字體小于12px的問(wèn)題。
為了計(jì)算方便 我們后面把比率乘以了100汰规，（320/640）*100汤功，那么相對(duì)應(yīng)這個(gè)元素在設(shè)置數(shù)值的時(shí)候就需要除以100了（50/100）,這樣可以保證最后出來(lái)的數(shù)值不變.
3.設(shè)置好html的font-size,那么我們下面就可以開始編寫根據(jù)設(shè)計(jì)稿的例子了物邑。
設(shè)計(jì)稿是640px溜哮，有一個(gè)紅色盒子寬高都是320px，里面的文字是32px色解，那么下面是這個(gè)例子的代碼茂嗓。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
</script>
</head>
<body style="margin: 0 ;padding: 0;font-size: 0.32rem">
<div style="width: 3.2rem;height: 3.2rem ;background: red">
<span>danny.xie</span>
</div>
</body>
</html>
1.在iphone5下的情況，設(shè)備的物理像素是320px
1.在iphone6下的情況科阎，設(shè)備的物理像素是375px
可以看到字體的大小和紅色盒子的寬高跟設(shè)計(jì)稿上面的比例是保持一致的述吸，這樣就是rem適配不同設(shè)備的的基本用法，如上文有錯(cuò)誤锣笨，歡迎指出和討論蝌矛，十分感謝。
求點(diǎn)贊错英，求關(guān)注~
