今天有朋友問我rem布局時，當屏幕寬度不一樣的時候如何設置html的font-size的值，所以我就寫了一個js供大家參考，如果有更好想法的同學可以回復我哦。

#box{

background: red;

}

#div1{

background: blue;width:10rem;height:4rem;

}

#div2{

background: yellow;width:10rem;height:4rem;

}

(function(doc,win){

var doc = doc.documentElement;

doc.addEventListener('DOMContentLoaded', Resize, false);

// 當DOM加載后執行

win.addEventListener('resize', Resize, false);

// 當屏幕發生變化時執行

function Resize(){

doc.style.fontSize=doc.clientWidth/68.3 +'px'; //屏幕寬度為1366時 html font-size=20px;

//68.3為1366/20計算得出的值，當編寫瀏覽器發生變化時可用編寫的瀏覽器寬度/20得出這個固定值;

}

})(document,window)

最后友情提示：因為每個瀏覽器的fontSize最小的字體大小不一樣，所以盡量使你的html的fontSize在瀏覽器的合理范圍內。

總結

以上是生活随笔為你收集整理的html中js修改字体,rem布局中使用js修改html的fontSize的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。