本文介绍如何在浏览器窗口尺寸改变时，自动、实时地调整指定 div 的宽高，无需手动触发按钮，核心是监听 window 的 resize 事件并执行尺寸更新逻辑。
本文介绍如何在浏览器窗口尺寸改变时，自动、实时地调整指定 div 的宽高，无需手动触发按钮，核心是监听 window 的 resize 事件并执行尺寸更新逻辑。
要实现页面元素（如
）随浏览器窗口缩放而自适应调整尺寸，关键在于监听 window.resize 事件——该事件会在用户拖拽窗口边缘、切换设备横竖屏或缩放浏览器时自动触发。
以下是一个完整、可直接运行的 jQuery 实现方案：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><div id="main-page">
<div class="container-fluid p-0">
<div class="row">
<div class="col-lg-12">
<div id="height" style="color: wheat; font-family: monospace; padding: 10px;"></div>
</div>
</div>
</div>
</div>
<script>
function changeSize() {
const winWidth = $(window).width();
const winHeight = $(window).height();
$("#main-page").css({
width: winWidth + 'px',
height: winHeight + 'px'
});
$("#height").text(`Height: ${winHeight}px | Width: ${winWidth}px`);
}
$(document).ready(function() {
changeSize(); // 初始化尺寸（避免首次加载空白）
});
$(window).on("resize", function() {
changeSize(); // 每次窗口尺寸变化时重新计算并应用
});
</script>
✅ 关键要点说明：
- 使用 $(window).width()/height() 获取当前视口尺寸（非 $(this)，因在事件回调中 this 指向原生 window 对象，jQuery 包装后才支持链式方法）；
- 必须在 $(document).ready() 中首次调用 changeSize()，确保页面加载完成即应用初始尺寸；
- resize 事件会高频触发，如需优化性能（例如防抖），可在生产环境添加 setTimeout 节流逻辑；
- 若需响应式布局优先，建议优先使用 CSS 媒体查询（@media）或 vh/vw 单位（如 height: 100vh; width: 100vw;），JS 方案更适合复杂逻辑或动态计算场景。
⚠️ 注意：避免在 resize 回调中频繁操作 DOM 或触发重排（reflow）。本例中仅设置宽高和文本，属轻量操作；若涉及大量样式计算或动画，请考虑 requestAnimationFrame 或节流处理。
