1. 程式人生 > >【JavaScript】真正實現網頁字型大小跟隨螢幕變化而變化

【JavaScript】真正實現網頁字型大小跟隨螢幕變化而變化

方法一:

    使用媒體查詢Media獲取螢幕寬度,根據不同螢幕下情況,給元素賦值不同字型大小,

     @media screen and (min-width:640px){
         .IRYFloat P{
             font-size: 3.0rem;
         }
     }

  方法二:利用JS動態變化調整:

<script type="text/javascript" >
    /*網頁字跟隨頁面自動變化*/
     function setRem(){
         /*獲取當前頁面的寬度*/
         var width = document.body.offsetWidth;
         /*設定頁面的字型大小*/
         var nowFont=width/375*20;
         /*通過標籤名稱來獲取元素*/
         var htmlFont=document.getElementsByTagName('html')[0];
         // 給獲取到的元素的字型大小賦值
         htmlFont.style.fontSize =nowFont+"px";
     }
      setRem();
      window.onresize=setRem;  //監聽螢幕變化
</script>