window.onresize根据不同浏览器宽度实时调用不同的代码

最新推荐文章于 2023-05-23 11:22:54 发布

原创最新推荐文章于 2023-05-23 11:22:54 发布 · 3.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #javascript

网站前端开发同时被 2 个专栏收录

12 篇文章

订阅专栏

Javascript

3 篇文章

订阅专栏

本文介绍了一个简单的JavaScript函数，用于根据浏览器窗口的大小调整页面布局。当浏览器窗口尺寸变化时，通过监听'onresize'事件实现自动调整。具体实现包括获取当前浏览器窗口的宽度，并据此执行不同的布局调整逻辑。

<script type="text/javascript">
	setSize();//首先调用一次
	window.onresize = function(){
		setSize();  //浏览器缩放实时调用
	}
	function setSize(){
		var wid = document.body.clientWidth;
			
		if(wid<768){
			//浏览器宽度小于768时执行
		}else{
			//浏览器宽度大于等于768时执行
		}
	}
</script>

关键在 window.onresize = function(){}

获取浏览器宽度 document.body.clientWidth;