matchMedia是浏览器API，用于动态监听视口变化，接收媒体查询字符串并返回MediaQueryList对象，可判断当前是否匹配条件并响应布局调整。通过addEventListener监听change事件，能实时执行不同逻辑，如切换导航模式或控制组件初始化。示例中判断max-width: 768px实现移动端检测，并结合回调函数处理布局切换。常见应用场景包括按屏幕大小启用懒加载、动画控制、图表类型切换等。建议封装onBreakpoint函数以复用逻辑，确保初始状态正确且支持取消订阅。注意兼容性方面IE10+需使用addListener，避免频繁重绘应结合防抖，组件销毁时需移除监听防止内存泄漏，查询字符串须合法否则matches为false。合理使用matchMedia可提升响应式交互灵活性。
在响应式网页开发中，除了 CSS 媒体查询，JavaScript 也能动态监听视口变化。通过 window.matchMedia() 方法，我们可以判断当前是否匹配某个媒体查询条件，并实时响应布局调整。这对于需要根据屏幕尺寸执行不同逻辑的场景非常有用，比如动态加载内容、控制轮播行为或切换导航模式。
什么是 matchMedia？
matchMedia 是浏览器提供的 API，接收一个媒体查询字符串（类似 CSS 中的 @media），返回一个 MediaQueryList 对象。该对象包含当前是否匹配该查询的信息，并支持监听变化。
例如，判断是否为移动端：
const mq = window.matchMedia('(max-width: 768px)');
if (mq.matches) {
console.log('当前视口小于等于 768px');
}
监听视口变化
静态判断只能获取当前状态，若要响应窗口缩放或设备旋转，需使用 addEventListener 监听 change 事件。
立即学习“Java免费学习笔记（深入）”；
示例：监听页面宽度是否进入移动端模式
const mq = window.matchMedia('(max-width: 768px)');
function handleScreenChange(e) {
if (e.matches) {
console.log('切换到移动布局');
// 执行移动端逻辑
} else {
console.log('切换到桌面布局');
// 执行桌面端逻辑
}
}
// 绑定监听
mq.addEventListener('change', handleScreenChange);
实际应用场景
常见用途包括：
- 控制组件初始化时机，如仅在桌面端启用悬浮菜单
- 根据屏幕大小决定是否启用懒加载或动画效果
- 配合 Intersection Observer 实现不同断点下的滚动行为差异
- 动态切换图表类型（如移动端用柱状图，桌面用折线图）
建议封装成可复用函数：
function onBreakpoint(query, callback) {
const mq = window.matchMedia(query);
mq.addEventListener('change', callback);
callback(mq); // 立即执行一次，确保初始状态正确
return () => mq.removeEventListener('change', callback);
}
// 使用方式
const unsubscribe = onBreakpoint('(min-width: 1024px)', (e) => {
if (e.matches) {
initDesktopSidebar();
} else {
destroyDesktopSidebar();
}
});
注意事项与兼容性
虽然现代浏览器广泛支持 matchMedia，但仍需注意：
- IE10+ 支持基本功能，但旧版本需使用 addListener 而非 addEventListener
- 避免频繁触发重绘操作，复杂逻辑可结合防抖处理
- 记得在组件销毁时移除监听，防止内存泄漏
- 媒体查询字符串必须合法，否则 matches 恒为 false
基本上就这些。合理使用 matchMedia 能让 JavaScript 更好地融入响应式设计体系，实现更灵活的交互控制。
