应使用 addeventlistener 监听 resize 事件并配合防抖（如 cleartimeout + settimeout 延迟 150–250ms），通过 window.innerwidth/innerheight 获取稳定尺寸后，切换 class、调用布局函数或结合 matchmedia 更新 ui，并在组件卸载前移除监听器以防内存泄漏。
用 window.addEventListener('resize', handler) 监听窗口变化，配合防抖控制执行频率，再根据 window.innerWidth 和 window.innerHeight 获取新尺寸，驱动布局更新。关键不在“监听到就立刻动”，而在于“只在稳定后精准响应”。
监听 resize 事件的基本写法
窗口大小改变（拖拽边框、切换全屏、横竖屏旋转）时，浏览器会自动触发 resize 事件：
- 推荐使用
addEventListener，避免覆盖已存在的监听器 - 回调函数中直接读取
window.innerWidth和window.innerHeight，它们反映当前视口真实宽高 - 注意：该事件在拖拽过程中可能每秒触发几十次，不加限制容易卡顿或重绘失序
必须加防抖，否则容易出问题
连续调整窗口时，resize 高频触发，但多数场景只需响应最终尺寸。简易防抖实现如下：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 定义一个变量存储定时器 ID，例如
let resizeTimer - 每次触发时先
clearTimeout(resizeTimer)，再用setTimeout延迟执行（常用 150–250ms） - 延迟期间再次触发就重置定时器，确保只在用户“松手”后运行一次布局逻辑
拿到尺寸后怎么调整布局
尺寸只是输入，真正起作用的是你如何用它驱动 UI 变化：
- 切换 CSS 类名更轻量，例如
document.body.classList.toggle('small-screen', width - 需要精确控制时，可调用布局函数，比如重新计算栅格列数、显示/隐藏侧边栏、重设 Canvas 的
width/height属性（不只是style.width） - 结合
window.matchMedia判断媒体查询状态，语义更清晰，例如if (matchMedia('(max-width: 768px)').matches) { ... }
别忘了清理监听器
尤其在单页应用中，组件卸载或页面跳转前必须移除监听，否则会造成内存泄漏：
- handler 必须是具名函数或保存了引用的函数，不能用匿名函数
- Vue 中在
onBeforeUnmount，React 中在useEffect清理函数里调用removeEventListener - 全屏模式下还需监听
fullscreenchange事件，统一处理视口变更带来的样式重置
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
