確定移動(dòng)端頁面的寬度范圍蒸痹，通常我會(huì)取320px - 768px,一個(gè)是最小的尺寸，一個(gè)是ipad的呛哟，再往上感覺就沒必要在手機(jī)展示了，也不美觀匿沛。所以css的容器經(jīng)常會(huì)這樣寫扫责，給予一個(gè)寬度范圍：
#indexContainer{
width:100%;
min-width:320px;
max-width:768px;
min-height:100%;
font-size: .24rem;
overflow-y: hidden;
background-image:url(../../common/images/indexBg.png);
background-position:50%0;
background-size:100%100%;
background-repeat: no-repeat;
}
2.全局加載一個(gè)js文件，用于動(dòng)態(tài)計(jì)算html的fontSize值逃呼。因?yàn)閞em是根據(jù)根節(jié)點(diǎn)html的字體大小而動(dòng)態(tài)改變的鳖孤，所以不同寬度下計(jì)算得到不同的font-size，相應(yīng)地就可以用rem去作為頁面元素的長(zhǎng)度單位實(shí)現(xiàn)自適應(yīng)了抡笼。下面是基于美術(shù)稿720px所寫的計(jì)算fontSize的js:
(function(_D){
var _self = {};
_self.resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
_self.Html = _D.getElementsByTagName("html")[0];
_self.widthProportion = function(){
var p = Number((_D.body&&_D.body.clientWidth||_self.Html.offsetWidth)/720).toFixed(3);
return p>1.067?1.067:p<0.444?0.444:p;
};
_self.changePage = function(){
_self.Html.setAttribute("style","font-size:"+_self.widthProportion()*100+"px");
};
_self.changePage();
if (!document.addEventListener) return;
window.addEventListener(_self.resizeEvt,_self.changePage,false);
document.addEventListener('DOMContentLoaded', _self.changePage, false);
})(document);
