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

#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);

// 當(dāng)DOM加載后執(zhí)行

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

// 當(dāng)屏幕發(fā)生變化時執(zhí)行

function Resize(){

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

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

}

})(document,window)

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。