使用-matchMedia-API-实现响应式-JavaScript-开发教程
目录
使用 matchMedia API 实现响应式 JavaScript 开发教程
使用 matchMedia API 实现响应式 JavaScript 开发教程
1. 什么是 matchMedia？
matchMedia
是浏览器提供的 JavaScript API，用于检测当前文档是否匹配指定的 CSS 媒体查询条件。与 CSS 媒体查询不同，它允许开发者在 JavaScript 中动态响应视口变化，实现更精细的控制。
核心特点
- 实时检测视口状态
- 支持 CSS3 媒体查询语法
- 可绑定事件监听器
- 返回
MediaQueryList对象
2. 基本语法
2.1 创建媒体查询对象
const mediaQuery = window.matchMedia('(max-width: 768px)');2.2 检查当前状态
if (mediaQuery.matches) {
console.log('当前视口宽度 ≤ 768px');
} else {
console.log('当前视口宽度 > 768px');
}返回对象结构
{
matches: true, // 是否匹配
media: '(max-width: 768px)', // 查询字符串
onchange: null // 事件处理器
}3. 监听媒体查询变化
3.1 添加事件监听
function handleTabletChange(e) {
if (e.matches) {
console.log('进入移动端模式');
} else {
console.log('退出移动端模式');
}
}
const mediaQuery = window.matchMedia('(max-width: 768px)');
mediaQuery.addEventListener('change', handleTabletChange);3.2 移除监听器
// 使用 addEventListener 添加的
mediaQuery.removeEventListener('change', handleTabletChange);
// 或使用传统方式
mediaQuery.onchange = null;4. 实际应用场景
4.1 暗色模式检测
const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeQuery.addEventListener('change', (e) => {
document.body.classList.toggle('dark-theme', e.matches);
});4.2 响应式图片加载
function loadResponsiveImage() {
const mediaQuery = window.matchMedia('(min-resolution: 2dppx)');
if (mediaQuery.matches) {
img.src = 'image@2x.jpg';
} else {
img.src = 'image.jpg';
}
}4.3 方向检测
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+
常见问题处理
内存泄漏 ：始终移除不需要的监听器
性能优化 ：避免在滚动事件中频繁创建查询对象
语法校验 ：
// 错误写法 window.matchMedia('max-width: 768px') // 正确写法 window.matchMedia('(max-width: 768px)')
移动端特殊处理
// 检测触摸设备
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 开发中实现真正动态、响应式的用户体验。建议在实际项目中结合具体需求灵活应用这些技术。