移动端REM响应式模板及相应规范

M端模板

    
    
    
    
    
    
    
    
    
    
    



    
网站头部
    
内容部分
    
页脚
    
    




    所有的PC页面都必须严格依照以上模板
    所用到的公用的库、组件没有特殊情况以DEMO里的相应版本，保持版本一致性

关于M端需要注意的是我们采用rem动态布局，模板中lib/common.js就是动态的实现原理
同时我们需要根据设计图来做相应的参数修改，代码中第7行中的750是默认设计图的宽度，后续只需修改此处即可。
规则，1rem = 100px，即某一元素的宽或高是100px,用本模板则只需写1rem，这样即可做到动态布局！

    (function (doc, win) {
        var docEl = doc.documentElement,
          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
          recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
              docEl.getElementsByTagName("body")[0].style.fontSize = docEl.style.fontSize;
          };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);