Window matchMedia() 方法：让网页“感知”屏幕尺寸的智能开关
在前端开发中，我们常常需要根据不同设备的屏幕尺寸来调整页面样式或行为。比如，手机端显示简洁的菜单，而桌面端展示完整的导航栏。传统方式依赖 CSS 媒体查询，但若想在 JavaScript 中动态响应这些变化，就需要一个更灵活的工具——Window matchMedia() 方法。
这个方法就像给网页装上了一双“眼睛”，能实时感知当前视口（viewport）是否符合某种条件。它不只是一句代码，更是一种“响应式思维”的体现。今天，我们就来深入剖析这个强大又容易被忽视的 API。
什么是 Window matchMedia() 方法？
Window matchMedia() 方法是浏览器提供的一个原生 API，用于检测当前页面是否符合特定的媒体查询条件。它返回一个 MediaQueryList 对象，该对象包含当前匹配状态（matches）以及一个监听变化的事件机制。
简单来说，你可以用它来判断：“当前屏幕宽度是否大于 768px？”、“用户是否在暗色模式下？”等等。
// 示例：检测屏幕宽度是否大于 768px
const mediaQuery = window.matchMedia('(min-width: 768px)');
// 检查当前是否匹配条件
console.log(mediaQuery.matches); // true 或 false
这里的 (min-width: 768px) 就是标准的媒体查询语法，和 CSS 中的一模一样。matchMedia() 让 JavaScript 也能“读懂”这些条件。
💡 小贴士：
matchMedia()是Window接口的方法，因此可以直接通过window调用，无需额外引入库。
基本用法与返回值解析
matchMedia() 返回的是一个 MediaQueryList 实例，它有两个核心属性：
matches：布尔值，表示当前视口是否满足媒体查询条件。media：字符串，表示原始的媒体查询表达式。
const query = window.matchMedia('(max-width: 600px)');
console.log(query.media); // 输出: "(max-width: 600px)"
console.log(query.matches); // 输出: true 或 false，取决于当前屏幕尺寸
这个返回值的设计非常合理：你可以用 matches 判断当前状态，用 media 确认是哪个查询条件。
实际案例：根据屏幕尺寸切换布局
假设我们有一个页面，需要在移动端隐藏侧边栏，在桌面端显示。
// 创建一个媒体查询，判断是否为小屏幕
const smallScreen = window.matchMedia('(max-width: 600px)');
// 定义一个函数，根据匹配状态切换侧边栏显示
function toggleSidebar() {
const sidebar = document.getElementById('sidebar');
if (smallScreen.matches) {
// 屏幕小于 600px，隐藏侧边栏
sidebar.style.display = 'none';
} else {
// 屏幕大于等于 600px，显示侧边栏
sidebar.style.display = 'block';
}
}
// 初始执行一次
toggleSidebar();
// 关键：监听媒体查询变化，动态更新
smallScreen.addEventListener('change', toggleSidebar);
这段代码中，addEventListener('change') 是核心。当用户缩放浏览器或旋转手机时，matchMedia() 会自动重新评估条件，并触发 change 事件，从而保证页面始终响应最新状态。
事件监听机制：让响应式真正“活”起来
MediaQueryList 支持事件监听，这是 matchMedia() 最强大之处。它允许我们在条件变化时执行特定逻辑，而无需定时轮询。
事件类型：change
change 事件会在媒体查询的匹配状态发生改变时触发。例如，从“小屏”变为“大屏”，或反之。
const themeQuery = window.matchMedia('(prefers-color-scheme: dark)');
// 监听暗色模式变化
themeQuery.addEventListener('change', function(event) {
if (event.matches) {
// 用户开启了暗色模式
document.body.classList.add('dark-theme');
console.log('已切换至暗色模式');
} else {
// 用户使用亮色模式
document.body.classList.remove('dark-theme');
console.log('已切换至亮色模式');
}
});
这个例子展示了 matchMedia() 在主题切换中的价值。现代浏览器支持 prefers-color-scheme 媒体查询，让开发者能感知用户的系统偏好，从而提供更友好的体验。
📌 注意：
event.matches是事件对象的属性，表示新的匹配状态。
多条件查询与复杂匹配场景
matchMedia() 支持复杂的媒体查询组合，比如逻辑与、或、非等。
逻辑与（and）
// 同时满足：屏幕宽度大于 768px 且在暗色模式下
const darkLargeScreen = window.matchMedia('(min-width: 768px) and (prefers-color-scheme: dark)');
console.log(darkLargeScreen.matches); // 只有当两个条件都成立时才为 true
逻辑或（or）
// 屏幕宽度大于 1024px 或者设备是触控设备
const wideOrTouch = window.matchMedia('(min-width: 1024px), (pointer: coarse)');
console.log(wideOrTouch.matches); // 满足任一条件即为 true
逻辑非（not）
// 不在暗色模式下
const notDark = window.matchMedia('not (prefers-color-scheme: dark)');
console.log(notDark.matches); // 当前不是暗色模式时为 true
这些组合让 matchMedia() 能应对更复杂的业务场景，比如为平板设计专属交互、为触控设备优化按钮大小等。
与 CSS 媒体查询的协同工作
很多人会问：既然 CSS 也能做媒体查询，为什么还要用 matchMedia()？
答案是：CSS 控制样式，JavaScript 控制行为。
- CSS：决定“怎么显示”
matchMedia()：决定“如何响应”
举个例子：
/* CSS 控制样式 */
@media (max-width: 600px) {
.menu {
display: none;
}
}
@media (min-width: 768px) {
.menu {
display: block;
}
}
// JavaScript 控制交互行为
const mobileQuery = window.matchMedia('(max-width: 600px)');
mobileQuery.addEventListener('change', function() {
if (mobileQuery.matches) {
// 移动端：隐藏菜单，但提供汉堡按钮
document.querySelector('.hamburger').style.display = 'block';
} else {
// 桌面端：显示菜单，隐藏汉堡按钮
document.querySelector('.hamburger').style.display = 'none';
}
});
这样，CSS 做了视觉适配，JavaScript 做了交互适配，两者分工明确，协同工作，才是真正的响应式开发。
实用工具函数封装：让代码更优雅
为了提升可重用性，我们可以封装一个通用的 watchMedia 工具函数。
/**
* 监听媒体查询变化并执行回调
* @param {string} query - 媒体查询表达式，如 '(max-width: 600px)'
* @param {Function} callback - 匹配状态改变时执行的函数，参数为当前 matches 值
*/
function watchMedia(query, callback) {
const mediaQuery = window.matchMedia(query);
// 初始执行一次
callback(mediaQuery.matches);
// 监听变化
mediaQuery.addEventListener('change', function(event) {
callback(event.matches);
});
}
// 使用示例
watchMedia('(max-width: 600px)', function(isMobile) {
if (isMobile) {
console.log('当前为移动设备，执行移动端逻辑');
} else {
console.log('当前为桌面设备，执行桌面端逻辑');
}
});
这个封装不仅简洁，还避免了重复监听逻辑，是项目中值得收藏的模式。
总结：让 Web 更“聪明”的关键一步
Window matchMedia() 方法 是现代前端开发中不可或缺的一环。它将“静态的 CSS 媒体查询”升级为“动态的 JavaScript 响应式逻辑”，让网页真正具备“感知能力”。
通过它，你可以：
- 检测屏幕尺寸、设备类型、系统偏好等
- 在 JavaScript 中实现条件逻辑判断
- 监听变化，动态更新页面行为
- 与 CSS 媒体查询形成完美互补
无论你是初学者还是中级开发者，掌握 matchMedia() 都能显著提升你的响应式开发能力。它不像框架那样炫酷，却像地基一样稳固——没有它，很多高级交互都无法实现。
下次你在做响应式布局时，不妨先问自己一句：是否需要 matchMedia() 来增强交互的智能性？答案很可能是“需要”。