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

最新推荐文章于 2023-12-15 14:32:24 发布

jswm20150115

最新推荐文章于 2023-12-15 14:32:24 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 网站前端开发文章标签：浏览器 javascript

本文链接：https://blog.youkuaiyun.com/weiming8517/article/details/51361998

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

12 篇文章

订阅专栏

Javascript

3 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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