JavaScript响应式布局核心是动态响应尺寸变化：用resize事件监听窗口变化（需防抖），matchMedia精准判断断点，ResizeObserver监听元素尺寸变化，三者配合CSS媒体查询实现高效响应式。
JavaScript 实现响应式布局的核心不在于替代 CSS 媒体查询，而是在需要动态行为（如重绘图表、切换组件逻辑、手动调整 Canvas 尺寸等）时，及时感知并响应窗口尺寸变化。监听窗口大小变化是其中的关键一步。
使用 resize 事件监听窗口变化
最直接的方式是监听 window 对象的 resize 事件：
- 该事件在用户拖动浏览器边框、缩放页面、横竖屏切换或开发者工具调整视口时触发
- 注意：它可能高频触发（尤其拖拽时），需防抖处理，避免性能问题
- 示例写法：
用 matchMedia 做精准媒体查询判断
当需要按断点（如 min-width: 768px）执行不同逻辑，且不想依赖像素数值硬编码时，matchMedia 更语义化、更可靠：
- 它复用 CSS 媒体查询语法，支持监听匹配状态变化
- 不会因频繁 resize 触发冗余计算，只在断点跨越时回调
- 适合做“是否进入平板模式”“是否深色主题启用”等布尔判断
补充：监听元素尺寸变化 —— ResizeObserver
如果响应目标不是整个窗口，而是某个容器（如卡片区域、图表父容器）的尺寸变化，ResizeObserver 是现代标准方案：
- 它观察 DOM 元素内容框或边框的变化，比轮询高效得多
- 适用于组件级响应式（例如：根据容器宽度自动切换网格列数）
- 注意兼容性：IE 不支持，需考虑是否加 polyfill
实际搭配建议
多数项目中，三者配合使用效果更好：
- CSS 媒体查询负责基础布局与样式切换（首选，性能最优）
-
matchMedia处理断点相关的 JavaScript 行为开关（如是否启用轮播自动播放） -
resize+ 防抖 用于必须依赖窗口绝对尺寸的场景（如全屏地图初始化） -
ResizeObserver用于组件内部自适应（尤其嵌入式模块、Web Component）
