自適應處理：
使用rem布局的時候,為了兼容不同的分辨率,我們應該要動態(tài)的修正根字體的大小,讓所有的用rem單位的子元素跟著一起縮放,從而達到自適應的效果
一般情況在項目的最前面加載一段js來修改html的font-size，針對不同分辨率計算font-size琐旁，監(jiān)聽瀏覽器更改 html的font-size
docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
給html設置font-size大小倍靡，其實就是在DOMContentLoaded或者resize變化后調(diào)整font-size的大小，從而調(diào)整rem的比值關系厢汹。移動端的320寬度為標準去做適配的螟深。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>rem1</title>
<style type="text/css">
section {
width: 100%;
height: 100%;
background: red;
}
.page{
width: 5rem;
height: 10rem;
background: yellow;
font-size: 0.3rem;
}
</style>
</head>
<body>
<section>
<div class="page">rem跟著html:font-size變化</div>
</section>
</body>
<script type="text/javascript">
var docEl = document.documentElement,
//當設備的方向變化（設備橫向持或縱向持）此事件被觸發(fā)。綁定此事件時烫葬，
//注意現(xiàn)在當瀏覽器不支持orientationChange事件的時候我們綁定了resize 事件界弧。
//監(jiān)聽當前窗口的變化，一旦有變化就需要重新設置根字體的值
resizeEvt = 'onorientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
//設置根字體大小
docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
};
//綁定瀏覽器縮放與加載時間
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);
</script>
</html>
注釋1：
有的設計稿是要求滿屏顯示的情況搭综，要重新計算高度的差值垢箕，再乘以字體縮放頁面。
var oBjHeight = $("body").height(),
oBjWindowHeight= $(window).height();
if( oBjHeight > oBjWindowHeight){
docEl.style.fontSize = (20 * (docEl.clientWidth / 320))*(oBjWindowHeight/oBjHeight) + 'px';
}
注釋2：
布局視口的尺寸：document.documentElement.clientWidth/Height（不包括滾動條）
視覺視口的尺寸：window.innerWidth/Height（包括滾動條）
兩者的兼容性都較好
