移动端页面布局

一.使用rem

1.宽度自适应:

<script type="text/javascript">
        (function (doc,win){
            var docEl=doc.documentElement;
            console.log(docEl);
            var run=function () {
                var clientW=docEl.clientWidth;
                if(!clientW)return;
                docEl.style.fontSize=20/320*clientW+'px';
            };
            if(!doc.addEventListener)return;
            var resizeEvt='orientationchange' in win?'orientationchange':'resize';
            win.addEventListener(resizeEvt,run,false);
            doc.addEventListener('DOMContentLoaded',run,false);
            console.log(docEl.fontSize);
        })(document,window);
    </script>

2.高度:

(1)高度随着内容的改变而改变,屏幕大的就能看的多.
对于格式固定的,类似于登陆页面,我认为可以使用百分比设置高度.