在 jQuery 中，resize事件用于捕获浏览器窗口大小改变的操作，为创建响应式和自适应的网页提供了重要的机制。
handler(eventObject)
类型: Function()
每次事件触发时会执行的函数。
eventData
类型: PlainObject
一个对象，它包含的数据键值对映射将被传递给事件处理程序。
handler(eventObject)
类型: Function()
每次事件触发时会执行的函数。
这个方法不接受任何参数。
 | 该API 3.3版本已移除。请使用 .on( "resize", handler ) 或 .on( "resize", eventData, handler )代替.resize( handler ) or .resize( eventData, handler )。请使用 .trigger( "resize" ) 代替 .resize()。 |
resize 事件处理中的代码，不应该依赖于事件被调用的次数。由于不同浏览器对该事件实现的方式不同，该事件被调用的时机也不同。例如，对于 Internet Explorer 或 基于 WebKit 的浏览器（例如，Safari 和 Chrome）而言，resize 事件在窗口改变的过程中，会被连续调用。在某些浏览器，如 Opera，该事件只在调整窗口大小操作结束时被调用。
<script>
$(document).ready(function() {
$(window).resize(function() {
$('body').prepend('<div>' + $(window).width() + '</div>');
if ($(window).width() < 800) {
$('#leftColumn').css('width', '100%');
$('#rightColumn').css('width', '0');
} else {
$('#leftColumn').css('width', '30%');
$('#rightColumn').css('width', '70%');
}
});
});
</script>
<div id="leftColumn">左侧内容</div>
<div id="rightColumn">右侧内容</div>当窗口宽度小于 800 像素时，页面布局从两栏变为一栏，左侧栏占据整个宽度，右侧栏隐藏。
1. 性能优化：resize事件可能会频繁触发，特别是在用户调整窗口大小时。在事件处理函数中避免执行复杂和耗时的操作，以免影响页面性能。可以使用适当的防抖或节流技术来限制事件处理的频率。
2. 浏览器兼容性：虽然 jQuery 在一定程度上统一了不同浏览器的行为，但某些较旧的浏览器可能对 resize事件的支持不够完善或存在性能问题。在实际应用中，需要在多种浏览器上进行充分测试。
3. 事件解绑：如果不再需要监听窗口大小改变事件，应及时使用 off方法解绑resize事件，以释放资源和避免不必要的操作。
4. 元素尺寸计算：在resize事件处理函数中获取元素的尺寸时，要注意浏览器的渲染和重绘可能会导致尺寸计算的不准确。可以使用适当的方法（如$(window).width()、 $(element).outerWidth()等）来获取准确的尺寸信息。
5. 与其他响应式技术的结合：resize事件只是实现响应式设计的一部分，通常还需要结合 CSS 媒体查询、Flexbox或Grid布局等技术来实现更全面和高效的响应式效果。
6. 可访问性：在处理窗口大小改变时，要确保页面的内容和布局对于不同能力的用户仍然是可访问和可用的，特别是对于使用辅助技术的用户。
通过深入理解resize事件的工作原理，并遵循上述的注意事项，我们能够更有效地利用它来创建具有良好用户体验的响应式网页。
