rem实现移动设备响应式布局

rem单位基于 html 元素的字体大小。即如果当前HTML的font-size为16px,那么1rem=16px；用rem替换传统的px单位，可以通过改变HTML的font-size来实现响应式布局。

由于移动终端有不同大小屏幕的设备，所以不能像做PC端页面一样给它设定固定的宽高，移动端的页面高度可以是内容的高度，所以我们只需要考虑到不同屏幕的宽度问题，为了使页面在不同屏幕实现合适的放大或缩小，我用js去监听屏幕的宽度，以"（宽度/640）*100"（px）作为HTML的fontSize的大小。

(function (doc, win) {
     var docEl = doc.documentElement,
          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
          recalc    = function () {
                 var clientWidth = docEl.clientWidth||document.body.clientWidth;//获取设备宽度
                 if (clientWidth>=640) {
                    clientWidth = 640;
                 };
               docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
          };
          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

页面效果

image.png
image.png