JavaScript媒体查询与响应式设计
JavaScript通过window.matchMedia()实现媒体查询，可监听屏幕尺寸变化并触发逻辑响应，常用于动态加载组件、切换导航模式等场景。与CSS协同使用时，CSS负责样式调整，JavaScript处理行为逻辑，如在移动端隐藏菜单并绑定点击展开事件，桌面端则始终显示菜单。需注意避免频繁DOM操作、及时移除监听、兼容旧浏览器，并优先用CSS处理视觉变化，JavaScript仅补充交互逻辑，提升用户体验。
在现代网页开发中，响应式设计是确保网站在不同设备上都能良好显示的关键。除了CSS媒体查询，JavaScript也能参与响应式逻辑的控制，帮助开发者更灵活地处理屏幕尺寸变化、设备特性等场景。
JavaScript如何实现媒体查询
JavaScript通过 window.matchMedia() 方法来模拟CSS中的媒体查询功能。它可以监听特定的媒体条件是否匹配，并在条件变化时执行相应操作。
基本用法如下：
const mediaQuery = window.matchMedia('(max-width: 768px)');
if (mediaQuery.matches) {
console.log('当前视口宽度小于等于768px');
}
// 监听变化
mediaQuery.addEventListener('change', (event) => {
if (event.matches) {
console.log('进入移动端布局');
} else {
console.log('回到桌面端布局');
}
});
与CSS媒体查询的协同使用
CS
S负责样式层面的响应式调整，而JavaScript适合处理行为逻辑。两者结合能实现更复杂的交互。
常见应用场景包括：
- 在移动端动态加载轻量级轮播组件，桌面端使用复杂幻灯片
- 根据屏幕宽度决定是否初始化某个插件（如侧边栏菜单）
- 切换导航模式：移动端用汉堡菜单，桌面端用水平导航栏
实际应用示例：动态导航切换
假设我们有一个导航栏，在大屏幕上展示完整菜单，在小屏幕上改为折叠式菜单。
function handleNavigation(event) {
const navMenu = document.getElementById('nav-menu');
if (event.matches) {
// 移动端：隐藏菜单，添加按钮事件
navMenu.style.display = 'none';
document.getElementById('menu-toggle').onclick = () => {
navMenu.style.display = navMenu.style.display === 'block' ? 'none' : 'block';
};
} else {
// 桌面端：始终显示
navMenu.style.display = 'block';
document.getElementById('menu-toggle').onclick = null;
}
}
const mq = window.matchMedia('(max-width: 768px)');
mq.addEventListener('change', handleNavigation);
// 初始化
handleNavigation(mq);
注意事项与最佳实践
使用JavaScript进行媒体查询时需要注意性能和兼容性。
- 避免频繁操作DOM，建议通过切换类名来控制样式
- 及时清理事件监听，防止内存泄漏
- 注意matchMedia在旧版IE中的兼容性，必要时使用polyfill
- 不要重复CSS已能完成的工作，优先用CSS处理视觉变化
