使用 window.addEventListener('resize', handler) 监听窗口大小变化，配合 debounce 防抖（如清除并重设 150ms 定时器）避免高频触发卡顿，再根据 window.innerWidth/window.innerHeight 动态调整布局（如切换 CSS 类名）。
用 window.addEventListener('resize', handler) 监听窗口大小变化，配合 debounce 防抖提升性能，再根据新尺寸动态调整布局。
监听 resize 事件的基本写法
浏览器窗口大小改变时会触发 resize 事件，直接绑定即可：
- 使用
addEventListener更推荐，避免覆盖已有监听器 - 回调函数中可通过
window.innerWidth和window.innerHeight获取当前视口宽高 - 注意：该事件在拖拽窗口过程中会高频触发，不加控制容易卡顿
加上防抖避免频繁执行
连续 resize 可能每秒触发数十次，实际只需响应最终尺寸。常用简易防抖：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 定义一个定时器 ID 变量（如
let resizeTimer） - 每次触发时先清除旧定时器，再设新定时器延后执行（如 150ms）
- 延迟时间内再次触发就重置，确保只在“静止”后运行一次布局逻辑
根据尺寸调整布局的常见方式
拿到新尺寸后，可结合业务需求做不同处理：
立即学习“Java免费学习笔记（深入）”；
- 切换 CSS 类名（如
document.body.classList.toggle('mobile', width ） - 直接修改元素样式（如
el.style.width = width * 0.8 + 'px'，慎用） - 调用响应式布局函数（如重新计算栅格列数、隐藏/显示侧边栏）
- 配合
matchMedia做媒体查询式判断，语义更清晰（if (window.matchMedia('(max-width: 768px)').matches) { ... }）
记得清理监听器（尤其单页应用）
组件卸载或页面跳转前应移除监听，防止内存泄漏：
- 保存
addEventListener的 handler 引用（不能用匿名函数） - 在合适时机调用
window.removeEventListener('resize', handler) - Vue/React 中通常在
onUnmounted或useEffect清理函数里执行
