移动端 rem

确定移动端页面的宽度范围，通常我会取320px - 768px,一个是最小的尺寸，一个是ipad的，再往上感觉就没必要在手机展示了，也不美观。所以css的容器经常会这样写，给予一个宽度范围：

#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.全局加载一个js文件，用于动态计算html的fontSize值。因为rem是根据根节点html的字体大小而动态改变的，所以不同宽度下计算得到不同的font-size，相应地就可以用rem去作为页面元素的长度单位实现自适应了。下面是基于美术稿720px所写的计算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);