利用SASS函数功能实现px转rem

//跟字体大小
  html{
    font-size: 100px;
  }

  $baseFontSize:100;//基数
  @function px2rem($px){
    @return $px / $baseFontSize * 1rem;
  }
//调用
  .box{
    width: px2rem(600);
    height: px2rem(400);;
    background-color: lawngreen;
  }

这里说一下为啥不用em，因为em是相对于父级字体大小的，这样一层套一层比较麻烦，还有就是当我想改变其中一个div的字体大小时，整个布局就乱套了
还有一个问题就是当我们的浏览器窗口发生大小变化时，原来的布局是不是也应该完美的显示呢。这里我们就利用js来根据浏览器可视区(clientWidth)来重新给html设置响应的字体大小

/* 这里我们利用了一个自执行函数 */
(function(){  
    change();  
    function change(){     
         /* 这里的html字体大小利用了一个简单书序公式（十字相乘），当我们默认设置以屏幕320px位基准此时的字体大小为20px(320    20px),那么浏览器窗口大小改变的时候新的html的fontSize（clientWidth  新的值）就是clientWidth*20/320 */
         document.documentElement.style.fontSize = document.documentElement.clientWidth*20/320 + 'px';  
    }    
 /* 监听窗口大小发生改变时 */
  window.addEventListener('resize',change,false);})();

注意：一般情况下我们利用rem单位来设置元素的宽高就行，没必要页面中的所有元素都用rem来弄（当然了这个也得看具体需求了）