实现元素宽度跟随浏览器窗口变化

最新推荐文章于 2023-02-03 15:34:53 发布

11adaacc

最新推荐文章于 2023-02-03 15:34:53 发布

阅读量582

点赞数 1

分类专栏：例题

本文链接：https://blog.youkuaiyun.com/Rayshaan/article/details/113361828

版权

例题专栏收录该内容

65 篇文章

订阅专栏

本文探讨如何使网页元素的宽度根据浏览器窗口的变化自动调整，实现响应式布局。通过使用CSS的媒体查询、百分比单位或者弹性盒模型，可以确保元素在不同屏幕尺寸下保持良好的显示效果。

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

<body>
	<div id="left"></div>
	<div id="center"></div>
	<div id="right"></div>
	
	<script src="jquery-3.4.1.js"></script>
	<script type="text/javascript">		
		//浏览器窗口改变时触发
		$(window).resize(()=>{
			//将元素的宽度设为窗口的宽度/3
			$("#center").width(`${Math.floor($(window).width()/3)}`)
			console.log($("#center").width())
		})
	</script>
</body>