vue+element-ui 字体自适应不同屏幕

项目背景：屏幕自适应问题，当在不同分辨率的屏幕上显示页面时，页面的字体需要根据屏幕大小来自适应，想到使用rem作为字体的单位

vue-cli脚手架下的index.html中写入以下js脚本

<script>
  document.documentElement.style.fontSize=document.documentElement.offsetWidth/60+"px"
</script>

注：除以60的原因是我当时的电脑分辨率为1920*1680；1920/60=32; 所以使用的$r就要设置为32

scss文件中使用：
$r:32;

p{
   
  color: $em-text-color-base;</