js 根据屏幕大小改变字体大小.

最新推荐文章于 2024-06-22 00:49:23 发布

原创最新推荐文章于 2024-06-22 00:49:23 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery

js 同时被 3 个专栏收录

83 篇文章

订阅专栏

web前端

53 篇文章

订阅专栏

12 篇文章

订阅专栏

本文介绍了一种使用REM单位实现响应式布局的方法，通过JavaScript动态调整根元素字体大小，使页面在不同设备上都能保持良好的视觉效果。文章详细展示了如何在窗口大小变化时更新字体大小，确保了布局的一致性和灵活性。

<script src="jquery.min.js"></script>
<script>
var width = document.documentElement.clientWidth;
	if (width > 750) {
		width = 750
	}
	var fontSize = width/7.5
	console.log(width)
	document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
	$(function(){
		$(window).resize(function(){
			var w=$(window).width();
			if(w>750){
				w=750
				}
				var f=w/7.5
				$('html').css("font-size",f);
		})
	})

</script>

所有单位不再用px，而是rem