rem的定義：相對(duì)長(zhǎng)度單位。相對(duì)于根元素(即html元素)[font-size]計(jì)算值的倍數(shù)
一硕舆、rem的誕生
為什么出現(xiàn)rem？傳統(tǒng)的絕對(duì)單位px骤公，你設(shè)置多少px抚官，網(wǎng)頁(yè)就給你顯示多少px，但是手機(jī)的屏幕大小寬度不同阶捆。例如一個(gè)手機(jī)的寬度為375px,此時(shí)網(wǎng)頁(yè)中恰好有個(gè)div的的寬度也是375px,那么這div正好占滿(mǎn)手機(jī)寬度凌节，假如另一個(gè)手機(jī)的寬度是320px，那么這個(gè)div就會(huì)超出手機(jī)屏幕55px洒试，這樣網(wǎng)頁(yè)會(huì)出現(xiàn)橫向滾動(dòng)條倍奢。這這種情況顯然是我們所不希望看到的，我們想要的是這個(gè)div也在這個(gè)小手機(jī)上恰好占滿(mǎn)手機(jī)寬度垒棋，也就是說(shuō)手機(jī)寬卒煞，div就寬，手機(jī)窄叼架，div就窄畔裕，實(shí)現(xiàn)自適應(yīng)大小。px顯然已經(jīng)不滿(mǎn)足這種要求乖订，rem就孕育而生了扮饶。
二、rem是如何實(shí)現(xiàn)自適應(yīng)大小的
由定義可以看出：rem(倍數(shù)） = width / （html的font-size）=> width = (html的font-size) * rem(倍數(shù))乍构，只要html的font-size的大小變了甜无，width就會(huì)自動(dòng)變，所以rem是通過(guò)動(dòng)態(tài)設(shè)置html的font-size來(lái)改變width的大小哥遮，以達(dá)到網(wǎng)頁(yè)自適應(yīng)大小的目的
三岂丘、如何動(dòng)態(tài)設(shè)置html的font-size
定義公式：rem(倍數(shù)） = width / （html的font-size），根據(jù)公式我們可以得出：
rem(倍數(shù)） = 設(shè)計(jì)稿寬度( imgWidth ) / 你設(shè)置的font-size( defalutSize )
rem(倍數(shù)） = 網(wǎng)頁(yè)的實(shí)際寬度(screenWidth) / 你需要?jiǎng)討B(tài)設(shè)置的font-size( x ) ,那么得出設(shè)置html的font-size的公式為：
imgWidth / defalutSize = screenWidth / x
x = defalutSize * screenWidth / imgWidth
那么我們來(lái)定義一個(gè)函數(shù)來(lái)設(shè)置不同屏幕大小的html的font-size
function setSize() {
//獲取html元素
var html = document.documentElement;
//獲取網(wǎng)頁(yè)寬度
var screenWidth = html.clientWidth;
//設(shè)置默認(rèn)的fontSize昔善，可以設(shè)置任何大小元潘，為了好計(jì)算在這里我設(shè)置為100
var defalutSize = 100;
//設(shè)計(jì)圖寬度為750
var imgWidth = 750;
//計(jì)算實(shí)際的font-size
var currentFontSize = defalutSize * screenWidth / imgWidth
//設(shè)置html的font-size
var html.style.fontSize = currentFontSize + 'px';
}
那么當(dāng)網(wǎng)頁(yè)窗口大小發(fā)生變化（onresize）或者網(wǎng)頁(yè)dom元素加載完成(DOMContentLoaded)的這兩個(gè)事件發(fā)生時(shí)執(zhí)行setSize
//監(jiān)聽(tīng)窗口大小發(fā)生變化的事件
window.onresize = function(){
setSize();
}
window.onDOMContentLoaded = function() {
setSize();
}
很顯然上面的寫(xiě)法不夠優(yōu)雅，而且定義的setSize函數(shù)是全局的君仆，大部分開(kāi)發(fā)后面會(huì)有很多js翩概，說(shuō)不定就重名了，這樣一來(lái)會(huì)造成沖突返咱，所以我們寫(xiě)公共的js的時(shí)候應(yīng)該用閉包來(lái)包住钥庇，使其變量不會(huì)成為全局變量，那么上面綜合起來(lái)：
<script type="text/javascript">
(function(w,d) {
function setSize() {
var screenWidth = d.documentElement.clientWidth;
var currentFontSize = screenWidth * 100 / 750;
d.documentElement.style.fontSize = currentFontSize + 'px';
}
w.addEventListener('resize',setSize);
w.addEventListener('pageShow',setSize)
w.addEventListener('DOMContentLoaded',setSize)
})(window,document)
</script>
現(xiàn)在已經(jīng)根據(jù)不同屏幕大小設(shè)置了根元素html的font-size,那么如何去用呢咖摹？假如設(shè)計(jì)圖是750评姨，那么根據(jù)上面的默認(rèn)font-size,defalutSize = 100,如果設(shè)計(jì)圖上一個(gè)長(zhǎng)方形是寬度是750px，高度是32px,那么換算成rem應(yīng)該是：
width: 750 / 100 = 7.5rem;
height：32 / 100 = 0.32rem;
.box{
width:7.5rem;
height: 0.32rem;
background:red;
}
很明顯這個(gè)長(zhǎng)方形等于設(shè)計(jì)圖寬度，那么在網(wǎng)頁(yè)中也應(yīng)該占滿(mǎn)屏幕吐句，如果紅色長(zhǎng)方形寬度占滿(mǎn)屏幕說(shuō)明胁后，設(shè)置的rem實(shí)例成功，可以復(fù)制文章最后的代碼試試結(jié)果嗦枢！
現(xiàn)在看來(lái)把,defalutSize設(shè)置為100攀芯，大大的方便了計(jì)算，當(dāng)然可以設(shè)置為任意非負(fù)正整數(shù)文虏，因?yàn)椴徽撛O(shè)置多少侣诺，倍數(shù)rem永遠(yuǎn)是恒等的，也就是：
設(shè)計(jì)稿寬度( imgWidth ) / 你設(shè)置的font-size( defalutSize ) =
網(wǎng)頁(yè)的實(shí)際寬度(screenWidth) / 你需要?jiǎng)討B(tài)設(shè)置的font-size(currentFontSize)
完整實(shí)例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title></title>
<script type="text/javascript">
(function(w,d) {
function setSize() {
var screenWidth = d.documentElement.clientWidth;
var currentFontSize = screenWidth * 100 / 750;
d.documentElement.style.fontSize = currentFontSize + 'px';
}
w.addEventListener('resize',setSize);
w.addEventListener('pageShow',setSize)
w.addEventListener('DOMContentLoaded',setSize)
})(window,document)
</script>
<style media="screen">
*{
padding: 0;
margin:0;
}
div{
width:7.5rem;
height: 0.32rem;
background: red;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
