rem是指相对于根元素字体大小的单位，可以做到随着根元素的字体大小随之变化，达到自适应屏幕的效果。这里以PC常见的分辨率 1920px 为例说明。

在 head 中加上 meta 标签

代表宽度是设备宽度，同时不允许缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

设置根元素字体大小

相对于根元素 html

html {font-size: 100px;} /*100px方便计算，实际值需要自己确定*/

使用 css 计算不同屏幕时根元素

html {font-size: calc(100vw/1920);} /*100vw:屏幕宽度 1920：设计稿宽度*/

使用 js 计算不同屏幕时根元素

setHtmlFontSize()
if (window.addEventListener) {
  window.addEventListener('resize', function () {
      setHtmlFontSize()
  }, false)
}
function setHtmlFontSize () {
  // 1366是设计稿的宽度，当大于1366时采用1366宽度，比例也是除以13.66
   let deviceWidth = document.documentElement.clientWidth > 1920 ? 1920 : document.documentElement.clientWidth;
  document.getElementsByTagName('html')[0].style.cssText = 'font-size:' + deviceWidth / 19.2 + 'px !important';
}

或者

function resize(){
    let w=document.body.clientWidth;
    document.querySelector("html").style.fontSize=w*20/1920+'px';
    //rem与px没有实际的关系，根据情况不同比例不同的，这里说的根据情况，实际上就是自己设定比例
  	//假设1rem=20px;那么关系就是(屏幕宽度*20/设计稿宽度)，设计稿的字体大小是16px，那么就等于16/20rem;
  	//假设1rem=16px;那么关系就是(屏幕宽度*16/设计稿宽度)，设计稿的字体大小是16px，那么就等于16/16rem;
  	//注意，谷歌浏览器最小字体为12px,定义关系的时候，不要小于12px;极限是1rem=12px；
};
document.body.onresize=resize;

使用 sass 语法转换px rem

/* PX 转 rem */
@function px2Rem($px, $base-font-size: 19.2px) {
  @if (unitless($px)) { 
    @return ($px / 19.2) * 1rem;
  } @else if (unit($px) == em) {
    @return $px;
  }
  @return ($px / $base-font-size) * 1rem;
}