Window matchMedia() 方法（保姆级教程）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在现代 Web 开发中，响应式设计已成为不可或缺的核心能力。无论是适配不同屏幕尺寸、设备类型，还是根据用户环境动态调整页面内容，都需要一套灵活的解决方案。Window matchMedia() 方法正是为此而生的利器。它允许开发者通过 JavaScript 动态检测并响应设备的媒体特征，例如屏幕宽度、方向、颜色支持等。本文将从零开始，逐步解析这一方法的原理、用法及实际应用场景，帮助读者掌握这一工具并将其融入日常开发实践。

一、基础概念：理解 matchMedia() 的核心功能

1.1 什么是媒体查询？

媒体查询（Media Queries）是 CSS 中用于根据设备特性应用不同样式的技术。例如，当屏幕宽度小于 768px 时，导航栏会切换为汉堡菜单。Window matchMedia() 方法正是 JavaScript 对媒体查询的扩展，它允许开发者在代码层面直接检测这些条件是否满足。

形象比喻：
可以把媒体查询想象成快递公司的分拣系统。快递包裹（设备特征）进入系统后，分拣规则（媒体条件）会根据包裹尺寸、目的地等属性，将其导向不同的处理路径。matchMedia() 就像这个分拣系统的传感器，实时判断当前包裹是否符合某个规则。

1.2 matchMedia() 的基本语法

const mediaQueryList = window.matchMedia(mediaQuery);  

• window.matchMedia()：核心方法，接受一个媒体查询字符串作为参数。
• 返回值 MediaQueryList：包含以下属性和方法：
  • matches：布尔值，表示当前条件是否匹配。
  • media：返回传入的媒体查询字符串。
  • addListener() / removeListener()：用于监听条件变化的事件。

示例代码：

// 检测屏幕宽度是否小于 600px  
const mediaQuery = window.matchMedia("(max-width: 600px)");  
if (mediaQuery.matches) {  
  console.log("当前屏幕宽度小于 600px");  
}  

二、深入解析：媒体查询语法与特性

2.1 媒体特征（Media Features）

媒体查询通过定义“媒体类型”和“媒体特征”来筛选设备。例如：

/* 屏幕类型 + 宽度条件 */  
@media screen and (min-width: 1024px)  

以下是常用的媒体特征及其含义：

2.2 操作符与组合逻辑

媒体查询支持以下操作符和逻辑组合：

• min- / max-：定义最小值或最大值，例如 min-width: 500px。
• and：连接多个条件，例如 (min-width: 500px) and (orientation: landscape)。
• 逗号分隔符：表示“或”关系，例如 only screen and (max-width: 600px), (min-width: 1200px)。

案例对比：

// 检测屏幕宽度介于 500px 到 1024px 之间  
const mq = window.matchMedia("(min-width: 500px) and (max-width: 1024px)");  

// 检测横向模式且分辨率高于 144dpi  
const mq = window.matchMedia("screen and (orientation: landscape) and (resolution: min 144dpi)");  

三、进阶用法：动态响应与事件监听

3.1 监听媒体查询变化

通过 addListener() 方法，可以监听媒体条件的变化。例如，当用户旋转手机时触发回调函数：

const mediaQuery = window.matchMedia("(orientation: portrait)");  

function handleOrientationChange(event) {  
  if (event.matches) {  
    console.log("设备处于竖屏模式");  
  } else {  
    console.log("设备处于横屏模式");  
  }  
}  

// 添加监听器  
mediaQuery.addListener(handleOrientationChange);  

// 移除监听器（避免内存泄漏）  
// mediaQuery.removeListener(handleOrientationChange);  

3.2 动态调整页面内容

结合 matchMedia() 可以实现更灵活的交互逻辑。例如，根据屏幕宽度切换导航栏的显示方式：

function updateNavbar() {  
  const mq = window.matchMedia("(max-width: 768px)");  
  const navbar = document.querySelector("#navbar");  

  if (mq.matches) {  
    navbar.style.display = "none"; // 隐藏默认导航栏  
    document.querySelector("#mobile-menu").style.display = "block"; // 显示移动端菜单  
  } else {  
    navbar.style.display = "flex";  
    document.querySelector("#mobile-menu").style.display = "none";  
  }  
}  

// 初始加载时执行  
updateNavbar();  

// 监听窗口大小变化  
window.addEventListener("resize", updateNavbar);  

四、实际案例：从简单到复杂的应用场景

4.1 响应式布局的 JavaScript 实现

在某些需要动态修改 DOM 结构的场景中，matchMedia() 可以替代 CSS 媒体查询。例如，根据屏幕宽度切换表格的显示方式：

const table = document.getElementById("data-table");  

function adaptTable() {  
  const mq = window.matchMedia("(max-width: 800px)");  

  if (mq.matches) {  
    // 将表格转换为卡片式布局  
    table.classList.add("card-layout");  
  } else {  
    table.classList.remove("card-layout");  
  }  
}  

adaptTable();  
window.addEventListener("resize", adaptTable);  

4.2 动态加载资源

对于高分辨率设备，可以按需加载更高清的图片：

const mq = window.matchMedia("(min-resolution: 2dppx)");  

function loadRetinaImages() {  
  if (mq.matches) {  
    // 替换图片的 src 属性为高清版本  
    document.querySelectorAll("img").forEach(img => {  
      img.src = img.src.replace(".jpg", "@2x.jpg");  
    });  
  }  
}  

// 初始加载  
loadRetinaImages();  

// 监听分辨率变化（虽然不常见，但某些设备支持）  
mq.addListener(loadRetinaImages);  

4.3 表单交互优化

根据设备类型调整表单的交互逻辑：

// 检测是否为触控设备  
const isTouchDevice = window.matchMedia("(pointer: coarse)").matches;  

function setupForm() {  
  const submitBtn = document.getElementById("submit-btn");  

  if (isTouchDevice) {  
    submitBtn.style.padding = "15px"; // 增大按钮点击区域  
    submitBtn.style.fontSize = "1.2em";  
  } else {  
    // 恢复默认样式  
  }  
}  

setupForm();  

五、最佳实践与常见问题

5.1 性能优化建议

• 避免频繁调用：媒体查询的判断会消耗一定资源，建议将 matchMedia() 的结果缓存起来。
• 谨慎使用 resize 事件：在 resize 回调中执行复杂操作可能导致性能问题，可通过节流函数优化。

5.2 兼容性处理

虽然 matchMedia() 在现代浏览器中广泛支持，但针对老旧浏览器（如 IE 11），可以添加 Polyfill 或回退方案：

if (!window.matchMedia) {  
  window.matchMedia = function() {  
    return {  
      matches: false,  
      addListener: function() {},  
      removeListener: function() {}  
    };  
  };  
}  

5.3 常见误区

• 混淆 min-width 和 max-width：例如，max-width: 768px 表示“宽度小于等于 768px”。
• 忽略事件监听的移除：多个监听器可能导致重复执行，务必在组件卸载时清理。

六、结论

Window matchMedia() 方法为 JavaScript 带来了强大的媒体感知能力，使开发者能够精准响应设备特征的变化。无论是基础的布局适配，还是复杂的资源动态加载，这一工具都能提供灵活且高效的解决方案。通过结合 CSS 媒体查询与 JavaScript 的交互逻辑，开发者可以构建出更智能、更人性化的 Web 应用。

下一步行动建议：

1. 在现有项目中尝试用 matchMedia() 替代部分 CSS 媒体查询，观察效果差异。
2. 设计一个需要动态响应屏幕方向的案例（如游戏界面），并实现其交互逻辑。
3. 探索 MediaQueryList 对象的其他属性和方法，例如 dispatchEvent() 的高级用法。

掌握 Window matchMedia() 方法，不仅是技术能力的提升，更是构建未来 Web 应用的必备技能之一。