其他分享
首页 > 其他分享> > 用js实现在不同宽度的视口下自动调整字体大小

用js实现在不同宽度的视口下自动调整字体大小

作者:互联网

<div>
	Merry Christmas Eve
</div>
<script>
var autoFontSize=()=>{
	let deviceWidth = document.documentElement.clientWidth;
	let fontSizeVal = (20*(deviceWidth/320) > 40 ? 40 +"px" : (20*(deviceWidth/320) + "px"));
	document.documentElement.style.fontSize = fontSizeVal;
}

window.addEventListener("load",autoFontSize)
window.addEventListener("resize",autoFontSize)
</script>

切记不要忘记加上下面内容:

<meta name="viewport" content="width=device-width,initial-scale=1.0;" />

标签:20,px,40,js,window,视口,deviceWidth,autoFontSize,字体大小
来源: https://blog.csdn.net/Kiruthika/article/details/111658459