JavaScript通过window.matchMedia()监听媒体查询变化实现响应式行为，支持动态切换UI、资源加载和交互逻辑，需与CSS断点保持一致并及时清理监听器。
JavaScript 本身不直接实现响应式设计，但能动态响应媒体查询的变化，补足 CSS 媒体查询的静态局限。核心在于用 window.matchMedia() 监听断点变化，再执行对应逻辑，比如切换菜单、加载不同资源、调整组件行为等。
用 matchMedia 监听断点变化
window.matchMedia() 返回一个 MediaQueryList 对象，可主动查询当前是否匹配某媒体查询，也能监听变化：
- 调用
matchMedia("(max-width: 768px)").matches立即获取当前状态（true或false） - 用
.addEventListener("change", handler)在断点跨越时触发回调（现代写法，兼容性好） - 旧版可用
.addListener(handler)，但已废弃，建议统一用addEventListener
示例：在移动视口下显示侧边栏按钮，桌面下自动展开
const mobileQuery = window.matchMedia("(max-width: 768px)");
function handleMobileChange(e) {
if (e.matches) {
document.body.classList.add("mobile");
document.getElementById("sidebar").style.display = "none";
} else {
document.body.classList.remove("mobile");
document.getElementById("sidebar").style.display = "block";
}
}
mobileQuery.addEventListener("change", handleMobileChange);
handleMobileChange(mobileQuery); // 初始化一次
与 CSS 媒体查询保持一致
JavaScript 中的断点值必须和 CSS 中完全一致（包括单位、括号、空格），否则容易因微小差异导致状态不同步：
立即学习“Java免费学习笔记（深入）”；
- 推荐把断点提取为常量，CSS 和 JS 共用同一份定义（例如通过
:root自定义属性 +getComputedStyle读取，或构建时注入） - 避免硬编码多处，如
"(max-width: 768px)"写在 JS 里又在 CSS 里重复，后期维护易出错 - 若用 CSS-in-JS 或框架（如 Tailwind），注意其断点生成规则，JS 判断需对齐其实际输出的媒体查询
响应式交互增强（不止于显示/隐藏）
媒体查询配合 JS 可驱动更精细的行为，不只是 DOM 显示控制：
- 触屏设备下启用滑动轮播，鼠标设备下禁用或改用点击切换
- 小屏幕停用复杂动画，节省性能；大屏启用视差或 SVG 动画
- 根据视口宽度动态加载不同尺寸的图片或懒加载策略（如
srcset配合IntersectionObserver） - 移动端自动聚焦搜索框，桌面端保留默认焦点流
注意生命周期与清理
监听器需在组件卸载或页面离开前移除，防止内存泄漏：
- 使用
addEventListener时，保存引用以便后续removeEventListener - 单页应用中，在组件
unmount阶段清理；普通页面可在beforeunload或pagehide中处理 - 如果监听器只运行一次（如初始化适配），可用
{ once: true }选项自动清理
不复杂但容易忽略。关键不是“写 JS 让页面变小”，而是让 JS 行为随视口真实意图同步演进。
