JavaScript响应式布局核心是动态响应尺寸变化：用resize事件监听窗口变化（需防抖），matchMedia精准判断断点，ResizeObserver监听元素尺寸变化，三者配合CSS媒体查询实现高效响应式。
JavaScript 实现响应式布局的核心不在于替代 CSS 媒体查询，而是在需要动态行为（如重绘图表、切换组件逻辑、手动调整 Canvas 尺寸等）时，及时感知并响应窗口尺寸变化。监听窗口大小变化是其中的关键一步。
使用 resize 事件监听窗口变化
最直接的方式是监听 window 对象的 resize 事件：
function handleResize() {
console.log('窗口宽：', window.innerWidth, '高：', window.innerHeight);
// 在这里执行适配逻辑，比如重设图表容器宽度
}
// 简单防抖（延迟 150ms 执行，多次触发只留最后一次）
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(handleResize, 150);
});
</script>
用 matchMedia 做精准媒体查询判断
当需要按断点（如 min-width: 768px）执行不同逻辑，且不想依赖像素数值硬编码时，matchMedia 更语义化、更可靠：
- 它复用 CSS 媒体查询语法，支持监听匹配状态变化
- 不会因频繁 resize 触发冗余计算，只在断点跨越时回调
- 适合做“是否进入平板模式”“是否深色主题启用”等布尔判断
const mediaQuery = window.matchMedia('(min-width: 768px)');
function onMediaChange(e) {
if (e.matches) {
console.log('进入桌面视图');
// 初始化侧边栏、显示导航菜单等
} else {
console.log('退回移动视图');
// 收起菜单、启用汉堡按钮逻辑
}
}
// 立即执行一次，获取初始状态
onMediaChange(mediaQuery);
// 监听后续变化
mediaQuery.addEventListener('change', onMediaChange);
</script>
补充：监听元素尺寸变化 —— ResizeObserver
如果响应目标不是整个窗口，而是某个容器（如卡片区域、图表父容器）的尺寸变化，ResizeObserver 是现代标准方案：
立即学习“Java免费学习笔记（深入）”；
- 它观察 DOM 元素内容框或边框的变化，比轮询高效得多
- 适用于组件级响应式（例如：根据容器宽度自动切换网格列数）
- 注意兼容性：IE 不支持，需考虑是否加 polyfill
const container = document.getElementById('chart-container');
const ro = new ResizeObserver(entries => {
for (let entry of entries) {
const { width, height } = entry.contentRect;
console.log('容器尺寸更新为：', width, 'x', height);
// 调整 canvas.width/height，或重绘 ECharts 实例
}
});
ro.observe(container);
</script>
实际搭配建议
多数项目中，三者配合使用效果更好：
- CSS 媒体查询负责基础布局与样式切换（首选，性能最优）
-
matchMedia处理断点相关的 JavaScript 行为开关（如是否启用轮播自动播放） -
resize+ 防抖 用于必须依赖窗口绝对尺寸的场景（如全屏地图初始化） -
ResizeObserver用于组件内部自适应（尤其嵌入式模块、Web Component）
