使用 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 开发中实现真正动态、响应式的用户体验。建议在实际项目中结合具体需求灵活应用这些技术。