REM这个单位，会根据html的font-size大小进行转换。

html{font-size:100px;}
p{padding-top:.5rem;}

转换后p的padding-top就是50px了。只要我们进行适当的计算，当前屏幕的宽度，html的font-size是多少px就OK了。

计算rem基准的js

    //定义basesize来实现rem
    (function(doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
          var clientWidth = docEl.clientWidth,
            remBaseize = 40 * (clientWidth / 750),
            remBaseize = remBaseize > 60 ? 60 : remBaseize;
          if (!clientWidth) return;
          docEl.style.fontSize = remBaseize + 'px';
        };

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

sass自定义计算rem

@function rem($px) {
  $remSize :$px/40;
  @return #{$remSize}rem;
}
.main-page {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: rem(500);
  background-color: yellow;
  .test {
    width: rem(150);
    height: rem(120);
    background-color: blue;
  }
}