JavaScript 媒体查询：使用 MatchMedia 监听视口变化-js教程-PHP中文网

JavaScript 媒体查询：使用 MatchMedia 监听视口变化

夜晨

发布： 2025-11-08 19:51:02

原创

844人浏览过

matchMedia是浏览器API，用于动态监听视口变化，接收媒体查询字符串并返回MediaQueryList对象，可判断当前是否匹配条件并响应布局调整。通过addEventListener监听change事件，能实时执行不同逻辑，如切换导航模式或控制组件初始化。示例中判断max-width: 768px实现移动端检测，并结合回调函数处理布局切换。常见应用场景包括按屏幕大小启用懒加载、动画控制、图表类型切换等。建议封装onBreakpoint函数以复用逻辑，确保初始状态正确且支持取消订阅。注意兼容性方面IE10+需使用addListener，避免频繁重绘应结合防抖，组件销毁时需移除监听防止内存泄漏，查询字符串须合法否则matches为false。合理使用matchMedia可提升响应式交互灵活性。

javascript 媒体查询：使用 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免费学习笔记（深入）”；

示例：监听页面宽度是否进入移动端模式

AI新媒体文章

专为新媒体人打造的AI写作工具，提供“选题创作”、“文章重写”、“爆款标题”等功能

查看详情

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();
  }
});

登录后复制