rem的使用

普通设置rem

1.先设置屏幕尺寸的动态变化

<script>
  /* 设置rem单位*/
  function setRem(){
  var w=document.documentElement.clientWidth;
​
  document.querySelector('html').style.fontSize=w/20+'px';
  }
  setRem();
  window.οnresize=function(){
  setRem();
  }
</script>

2.再设置html的font-size

html {
    font-size: 62.5%;
}

PC端rem设置

1.先设置html的font-size的字体大小，默认是16px

html {
    font-size: 16px;
}

 

2.然后通过sass来设置比例，获取份额

@function p2r($size) {
  @return $size/16*1rem;
}

 

3.通过份额，根据屏幕尺寸的变化来动态设置html的font-size的大小

    /* 设置rem单位*/
    function setRem() {
      var w = document.documentElement.clientWidth;
      document.querySelector('html').style.fontSize = w / 80 + 'px';
    }
    setRem();
    window.onresize = function () {
      setRem();
    }