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

使用 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 = 'image@2x.jpg';
  } 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+

常见问题处理

  1. 内存泄漏:始终移除不需要的监听器

  2. 性能优化:避免在滚动事件中频繁创建查询对象

  3. 语法校验

    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 原生支持

最佳实践

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

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

相关推荐
一只一只妖1 小时前
突发奇想,还未实践,在Vben5的Antd模式下,将表单从「JS 配置化」改写成「模板可视化」形式(豆包版)
前端·javascript·vue.js
悟能不能悟4 小时前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶4 小时前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
LFly_ice5 小时前
学习React-9-useSyncExternalStore
javascript·学习·react.js
gnip5 小时前
js上下文
前端·javascript
中草药z5 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
世伟爱吗喽6 小时前
threejs入门学习日记
前端·javascript·three.js
F2E_Zhangmo6 小时前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
小浣熊喜欢揍臭臭7 小时前
react+umi项目如何添加electron的功能
javascript·electron·react
乖女子@@@7 小时前
React笔记_组件之间进行数据传递
javascript·笔记·react.js