JavaScript 实现响应式设计的核心是补充 CSS 媒体查询，而非替代：通过 window.matchMedia() 监听视口变化、动态加载资源、调整交互逻辑及适配设备行为；需复用 MediaQueryList、避免 resize 中重复调用、注意 SSR 兼容与监听器清理。
JavaScript 实现响应式设计，核心不是替代 CSS 媒体查询，而是补充其能力：监听视口变化、动态加载资源、调整交互逻辑、适配不同设备行为。媒体查询在 JavaScript 中主要通过 window.matchMedia() API 使用，它让 JS 能“感知”CSS 中定义的断点条件。
用 matchMedia 监听媒体查询状态
window.matchMedia() 接收一个 CSS 媒体查询字符串（如 "(max-width: 768px)"），返回一个 MediaQueryList 对象，该对象包含当前是否匹配、以及可监听变化的接口。
- 检查当前是否匹配：
mq.matches返回布尔值 - 监听变化：用
mq.addEventListener('change', handler)（推荐）或旧式mq.addListener(handler) - 取消监听：
mq.removeEventListener('change', handler)或mq.removeListener(handler)
示例：在小屏时启用滑动菜单，大屏时禁用
const mobileQuery = window.matchMedia('(max-width: 768px)');
function handleMobileChange(e) {
if (e.matches) {
initMobileMenu(); // 激活移动端逻辑
} else {
destroyMobileMenu(); // 清理移动端逻辑
}
}
mobileQuery.addEventListener('change', handleMobileChange);
handleMobileChange(mobileQuery); // 立即执行一次，确保初始状态正确
结合 CSS 自定义属性（CSS 变量）做协同响应
JS 不必直接操作 DOM 样式，可修改 CSS 变量，让样式层统一响应。例如在 CSS 中定义：
立即学习“Java免费学习笔记（深入）”；
:root {
--gap: 24px;
}
@media (max-width: 768px) {
:root { --gap: 12px; }
}
JS 中可读取或设置变量，也可配合 matchMedia 主动同步：
const mq = window.matchMedia('(max-width: 768px)');
document.documentElement.style.setProperty('--is-mobile', mq.matches ? '1' : '0');
mq.addEventListener('change', e => {
document.documentElement.style.setProperty('--is-mobile', e.matches ? '1' : '0');
});
避免常见陷阱
-
不要在 resize 事件里反复调用 matchMedia：它本身是轻量且可复用的，应提前创建并复用
MediaQueryList实例 -
注意 SSR/服务端渲染场景：
window在 Node.js 中不存在，需加判断if (typeof window !== 'undefined') - 监听器需及时清理：组件卸载或逻辑销毁时，记得移除事件监听，防止内存泄漏
- 不要用 JS 重复实现 CSS 已能完成的布局切换：优先用 Flex/Grid + 媒体查询；JS 应聚焦于行为适配（如触摸事件绑定、动画启停、数据懒加载等）
实际响应式增强场景举例
- 根据屏幕宽度决定是否初始化 Swiper（小屏用轮播，桌面用网格展示）
- 平板横屏时显示侧边栏，竖屏时折叠为抽屉 —— JS 控制开关状态和过渡类名
- 检测是否支持
prefers-reduced-motion，自动关闭复杂动画 - 根据
(hover: hover)判断是否有悬停能力，调整 tooltip 触发方式（hover vs click）
