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屬性，不然是沒有效果的額！！！！！