使用 window.addeventlistener('resize', handler) 监听窗口变化，配合 innerwidth/innerheight 或 getboundingclientrect() 获取尺寸，再动态更新样式或布局；需节流防高频触发，首次加载也要执行布局逻辑。
用 window.addEventListener('resize', handler) 监听窗口大小变化，配合 getBoundingClientRect() 或 clientWidth/clientHeight 获取当前尺寸，再动态更新元素样式或重新计算布局逻辑。
监听 resize 事件的基本写法
浏览器在窗口尺寸变化时会触发 resize 事件，但该事件可能高频触发（如拖拽窗口），需注意性能：
- 直接绑定简单回调即可捕获变化：
window.addEventListener('resize', () => { console.log('窗口变了'); }); - 避免在回调中频繁操作 DOM 或执行重排重绘，可加节流（throttle）控制执行频率
- 不需要手动移除监听器，除非页面长期存在且监听器引用了大量外部变量（防止内存泄漏）
获取当前窗口尺寸的常用方式
根据需求选择合适的方法获取尺寸数据：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
window.innerWidth和window.innerHeight：包含滚动条在内的视口宽高（最常用） -
document.documentElement.clientWidth/clientHeight：不包含滚动条的视口尺寸（兼容旧版 IE） -
element.getBoundingClientRect()：适合需要响应某个容器自身尺寸变化的场景（如侧边栏宽度影响主内容区）
调整布局的典型做法
监听到尺寸变化后，常见调整方式有：
- 切换 CSS 类：
if (window.innerWidth - 直接设置内联样式：
main.style.width = window.innerWidth > 1200 ? '80%' : '100%'; - 调用响应式布局函数，比如重新计算栅格列数、调整图表 canvas 尺寸、重绘 SVG 布局等
注意事项和优化建议
实际开发中容易忽略的关键点：
- 移动端 Safari 在横竖屏切换时可能只触发一次
resize，建议同时监听orientationchange（iOS）或检查window.matchMedia - 使用
requestAnimationFrame包裹布局更新逻辑，让修改对齐浏览器渲染帧，减少卡顿 - 首次加载时也要执行一次布局逻辑（因为用户可能以小窗口打开页面），可在
DOMContentLoaded或load后主动调用一次处理函数
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
