本文介绍如何利用 JavaScript 的 resize 事件，配合 jQuery 实现页面中指定 div（如 #main-page）随浏览器窗口尺寸实时自适应缩放，无需用户点击按钮，全程自动响应。
本文介绍如何利用 javascript 的 `resize` 事件，配合 jquery 实现页面中指定 div（如 #main-page）随浏览器窗口尺寸实时自适应缩放，无需用户点击按钮，全程自动响应。
在响应式网页开发中，仅依赖 CSS 媒体查询有时无法满足对元素精确尺寸控制的需求（例如需让某个容器始终占满视口全宽高）。此时，可通过监听 window.resize 事件，在窗口尺寸变化时动态更新 DOM 元素的宽高属性。
核心要点如下：
✅ 必须绑定 resize 事件：$(window).on('resize', ...) 是触发重设尺寸的关键，仅靠 $(document).ready() 只能初始化一次，无法响应后续缩放；
✅ 封装可复用逻辑：将尺寸计算与应用逻辑提取为独立函数（如 changeSize()），便于统一维护和多次调用；
✅ 注意上下文 this 指向：在 resize 回调中，this 指向 window 对象，因此 $(this).width() 和 $(this).height() 可正确获取当前视口尺寸；
✅ 增强可调试性：示例中同步更新
的文本内容，实时显示当前 #main-page 的宽高值，便于开发验证。
以下是完整可运行代码（需引入 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>
$(document).ready(function() {
changeSize(); // 初始化尺寸
});
$(window).on("resize", function() {
changeSize(); // 窗口缩放时重新计算
});
function changeSize() {
const width = $(window).width(); // 推荐显式使用 $(window)，语义更清晰
const height = $(window).height();
$("#main-page").css({
width: width + "px",
height: height + "px"
});
$("#height").text(`Height: ${height}px | Width: ${width}px`);
}
</script>
⚠️ 注意事项：
- 频繁触发 resize 事件可能影响性能，如需更高性能，建议添加防抖（debounce）处理（例如使用 setTimeout 延迟执行）；
- 若目标元素需保持宽高比或留白，应在 changeSize() 中加入额外逻辑（如减去边距、限制最小尺寸等）；
- 纯 CSS 方案（如 width: 100vw; height: 100vh;）更轻量且原生支持，应优先评估是否真正需要 JS 控制——本方案适用于需结合 JS 动态计算（如扣除导航栏高度）的复杂场景。
综上，resize 事件是实现窗口驱动式 DOM 尺寸调整的标准且可靠方式，合理封装与优化后，可稳定支撑各类自适应布局需求。
