文章标题

用rem实现移动端的弹性布局

随着各种新手机的发布，分辨率也碎片化了。
手机页面设计一般大小是640，但是，要做到对不同分辨率手机的适配，一般有两种解决方案，rem和百分比布局。下面就说一下用rem布局来制作手机页面。
核心是根据当前终端的宽度改变html的字体大小。

<script type="text/javascript">    new function() {        var _self = this;        _self.width = 640; //设置默认最大宽度        _self.fontSize = 100; //默认字体大小        _self.widthProportion = function() {            var p = (document.getElementsByTagName("html")[0].offsetWidth) / _self.width;            return p > 1 ? 1 : p < 0.5 ? 0.5 : p;        };        _self.changePage = function() {            document.getElementsByTagName("html")[0].setAttribute("style", "font-size:" + _self.widthProportion() * _self.fontSize + "px !important");        }        _self.changePage();        window.addEventListener("resize", function() {            _self.changePage();        }, false);    };</script>

这段代码要在的作用是：根据不同的分辨率设置根部html标签的font-size,做到不同分辨率的适配。
先按定高、宽设计出来页面，然后转换为rem单位。