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;
  margin: 5px;
  font-size: 16/$r+rem;  //這里計算出來的結果就是0.5rem;
  text-indent: 5px;
}

通過以上方法確實可以實現字體自適應屏幕大小，有個很XX的問題就是當瀏覽器窗口縮小或者原本小窗口的放大窗口后字體還是原來的大小，即改變窗口大小后需要手動刷新頁面，字體才會自適應頁面，這是個很不友好的現象。於是我想到需要一個方法來監聽瀏覽器的窗口，實時獲取窗口大小不要每次都刷新頁面。


方法改進：（依然在index.html頁面中寫js腳本）

<script>
  function placeholderPic(){
    document.documentElement.style.fontSize=document.documentElement.offsetWidth/60+"px"; //同上
  }
  placeholderPic();
  window.onresize=function(){  //窗口改變時再次執行一次函數即可
    placeholderPic();
  }
</script>

通過以上方法即可實現頁面字體的自適應。隨意改變瀏覽器窗口大小，字體大小也能實時變化；需要注意的是，元素的字體都需要加上font-size屬性，否則是沒有效果的額！！！！！