用 window.matchMedia 实现高级响应式开发：API 全面解析与实战技巧

在现代Web开发中，响应式设计已成为前端开发的"标配"。虽然 CSS 的 @media 媒体查询能解决大部分样式适配问题，但总有一些业务逻辑、数据交互、动画特效等需求必须依赖 JavaScript 进行动态响应。这时，window.matchMedia 就变得非常有用！

一、window.matchMedia 是什么？

window.matchMedia 是原生 JS 提供的 API，可以在代码中使用CSS媒体查询语法判断当前窗口是否符合特定条件，还能监控条件变化，极大丰富了响应式开发的能力。

核心功能：

判断页面是否匹配某个媒体查询条件
动态监听窗口变化，做出行为层、数据层的自适应调整

二、常见用法详解

js 复制代码

const mql = window.matchMedia('(max-width: 768px)');
console.log(mql.matches); // true表示小屏（如手机），false表示大屏

matches: 当前窗口是否符合对应条件，布尔值
查询条件可以任意使用 CSS 支持的 @media 语法，如 orientation、min-width、color-gamut等

三、监听窗口变化

想让代码能实时感知窗口变化，只需监听 change 事件：

js 复制代码

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

mql.addEventListener('change', (e) => {
  if (e.matches) {
    // 移动端
    console.log('进入移动端模式');
  } else {
    // 桌面端
    console.log('进入桌面端模式');
  }
});

四、实际应用场景举例

智能菜单自适应：移动端只显示"汉堡"，桌面展示全功能菜单
多端素材动态切换：小屏走低清图片，大屏走高清资源
异步数据响应：小屏只拉取概要信息，大屏展示完整数据
交互细节切换：如动画、卡片宽高、侧栏布局等根据窗口及时调整

五、window.matchMedia 与 CSS @media 的区别

方向	CSS @media	window.matchMedia
控制目标	纯样式	样式 + JS 行为
响应方式	样式自动切换	可执行任意 JS 逻辑
实时性	样式自动应用	支持动态事件监听
场景	适合经典自适应布局	智能业务、动画、懒加载

这两者是互补关系，建议配合使用，保证体验和性能最优。css-tricks

六、进阶技巧

多条件组合：如 (min-width: 600px) and (orientation: landscape)
结合框架：React/Vue/Angular中可以做 hooks、watchers、全局配置等
解除监听：mql.removeEventListener('change', handler) 避免内存泄漏
多媒体类型支持：不仅可判断屏幕尺寸，还能判断打印模式等

七、常见误区与注意点

只在浏览器环境可用（window 对象存在时）
多处 addEventListener 后要合理移除
不同浏览器旧版实现细节可能有差异，需兼容处理（如 addListener/ removeListener）

八、结语

window.matchMedia 是现代前端响应式开发强力武器，不仅仅能做"适配"，还能提升页面智能水平和交互体验。CSS 解决"该怎么展示"，JS 进一步决定"该做什么和怎么做"，两者结合让你的Web项目适用于任何设备和场景！