【JavaScript】真正實現網頁字型大小跟隨螢幕變化而變化
阿新 • • 發佈:2018-12-15
方法一:
使用媒體查詢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>