rem自适应布局

Genius only means hard-working all one's life.

监听浏览器，针对不同分辨率计算font-size

(function (doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
       var clientWidth = docEl.clientWidth;
       if (!clientWidth) return;
       /*720为设计稿大小*/
       docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
    };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);  })(document, window);

只需在js中添加如上一段代码，然后结果就是 100px = 1rem; 之后就可以使用rem实现自适应布局。

注意要在HTML页面顶部添加如下 meta 标签：

    <meta charset="UTF-8">
    <!-- 根据浏览器的屏幕大小自适应的展现合适的效果 -->
    <meta name="applicable-device" content="pc,mobile" />
    <!-- 移动端 浏览器中页面将以原始大小显示，不允许缩放 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <!--自动选择更好的浏览器-->
    <meta name="renderer" content="webkit">

rem布的自适应页面