使用 matchMedia API 实现响应式 JavaScript 开发教程

1. 什么是 matchMedia？

matchMedia 是浏览器提供的 JavaScript API，用于检测当前文档是否匹配指定的 CSS 媒体查询条件。与 CSS 媒体查询不同，它允许开发者在 JavaScript 中动态响应视口变化，实现更精细的控制。

核心特点

实时检测视口状态
支持 CSS3 媒体查询语法
可绑定事件监听器
返回 MediaQueryList 对象

2. 基本语法

2.1 创建媒体查询对象

javascript 复制代码

const mediaQuery = window.matchMedia('(max-width: 768px)');

2.2 检查当前状态

javascript 复制代码

if (mediaQuery.matches) {
  console.log('当前视口宽度 ≤ 768px');
} else {
  console.log('当前视口宽度 > 768px');
}

返回对象结构

javascript 复制代码

{
  matches: true,       // 是否匹配
  media: '(max-width: 768px)',  // 查询字符串
  onchange: null       // 事件处理器
}

3. 监听媒体查询变化

3.1 添加事件监听

javascript 复制代码

function handleTabletChange(e) {
  if (e.matches) {
    console.log('进入移动端模式');
  } else {
    console.log('退出移动端模式');
  }
}

const mediaQuery = window.matchMedia('(max-width: 768px)');
mediaQuery.addEventListener('change', handleTabletChange);

3.2 移除监听器

javascript 复制代码

// 使用 addEventListener 添加的
mediaQuery.removeEventListener('change', handleTabletChange);

// 或使用传统方式
mediaQuery.onchange = null;

4. 实际应用场景

4.1 暗色模式检测

javascript 复制代码

const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');

darkModeQuery.addEventListener('change', (e) => {
  document.body.classList.toggle('dark-theme', e.matches);
});

4.2 响应式图片加载

javascript 复制代码

function loadResponsiveImage() {
  const mediaQuery = window.matchMedia('(min-resolution: 2dppx)');
  
  if (mediaQuery.matches) {
    img.src = '[email protected]';
  } else {
    img.src = 'image.jpg';
  }
}

4.3 方向检测

javascript 复制代码

const orientationQuery = window.matchMedia('(orientation: portrait)');

orientationQuery.addListener((mq) => {
  if (mq.matches) {
    console.log('竖屏模式');
  } else {
    console.log('横屏模式');
  }
});

5. 兼容性与注意事项

浏览器支持

Chrome 9+
Firefox 6+
Safari 5.1+
Edge 12+
iOS Safari 5.1+

常见问题处理

内存泄漏：始终移除不需要的监听器
性能优化：避免在滚动事件中频繁创建查询对象

语法校验：

javascript 复制代码

// 错误写法
window.matchMedia('max-width: 768px')

// 正确写法
window.matchMedia('(max-width: 768px)')

移动端特殊处理

javascript 复制代码

// 检测触摸设备
const isTouch = window.matchMedia('(pointer: coarse)').matches;

// 防止安卓误判
window.addEventListener('resize', () => {
  const mediaQuery = window.matchMedia('(max-width: 768px)');
  console.log(mediaQuery.matches);
}, { passive: true });

6. 总结

优势对比

特性	CSS 媒体查询	matchMedia
动态检测	❌ 页面加载时	✅ 实时
JavaScript 控制	有限	完全控制
事件驱动	需配合 ResizeObserver	原生支持

最佳实践

优先使用 addEventListener 而非 onchange
复用 MediaQueryList 对象
配合 ResizeObserver 处理复杂布局

通过掌握 matchMedia，您可以在现代 Web 开发中实现真正动态、响应式的用户体验。建议在实际项目中结合具体需求灵活应用这些技术。