响应式之rem

1、什么是rem

  rem是根元素字体大小单位，比如html{font-size: 16px;}  1rem = 16px
  rem不仅仅可以给字体设置大小，其他px单位都可以用 比如padding:2rem相当于32px

2、rem有什么用

  选择性使用rem作为作为单位，这样在不同尺寸的设备上，通过修改根节点的font-size大小，实现等比例缩放

3、如何使用

  加入js:绑定监听事件，dom加载后和尺寸变化时改变font-size

//改变font-size
(function(doc,win){
    var docEI = doc.documentElement,
    resizeEvt = 'orientationchange' in window?'orientataionchange':'resize',
    recalc = function(){
        var clientWidth = docEI.clientWidth;
        if(!clientWidth) return;
        //100是字体大小，1536是开发时浏览器窗口的宽度，等比计算
        docEI.style.fontSize = 100*(clientWidth/1536)+'px';
    }

    if(!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document,window);
或者
!function(n){
    var  e=n.document,
         t=e.documentElement,
         i=720,
         d=i/100,
         o="orientationchange"in n?"orientationchange":"resize",
         a=function(){
             var n=t.clientWidth||320;n>720&&(n=720);
             t.style.fontSize=n/d+"px"
         };
         e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

/*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
      为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/

加上以上js后，使用rem代替px,直接除100即可

div{
      font-size: .2rem;/*相当于20px*/
      padding: .1rem .2rem;/*相当于10px 20px*/
}