JavaScript媒体查询主要通过window.matchMedia()实现，可精准监听屏幕尺寸、横竖屏、配色方案等变化并触发回调，比resize事件更轻量高效。
JavaScript 媒体查询主要靠 window.matchMedia() 实现，它能监听屏幕尺寸、横竖屏、配色方案等变化，并在条件匹配时触发回调，比单纯监听 resize 事件更精准、更轻量。
用 matchMedia 监听媒体查询状态
直接传入 CSS 媒体查询字符串（如 "(max-width: 768px)"），返回一个 MediaQueryList 对象，它有 matches 属性（布尔值）和 addEventListener 方法：
const mq = window.matchMedia("(max-width: 768px)");
if (mq.matches) {
console.log("当前是移动端断点");
} else {
console.log("当前是桌面端");
}
响应屏幕变化：添加事件监听
使用 addEventListener("change", handler) 在媒体查询状态切换时执行逻辑，避免频繁触发（不像 resize 那样每像素都可能调用）：
- 支持现代浏览器（IE10+，所有主流移动端）
- 回调只在匹配状态真正改变时触发（比如从 true → false）
- 记得在不需要时调用
removeEventListener防止内存泄漏
const mq = window.matchMedia("(prefers-color-scheme: dark)");
function handleColorScheme(e) {
if (e.matches) {
document.body.classList.add("dark");
} else {
document.body.classList.remove("dark");
}
}
mq.addEventListener("change", handleColorScheme);
// 清理示例（如组件卸载时）
// mq.removeEventListener("change", handleColorScheme);
兼容旧版：fallback 到 resize 监听（仅必要时）
如果需支持 IE9 或极老环境，可降级为监听 resize 并手动判断宽度，但注意节流：
Java注释规范Skills
下载
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
立即学习“Java免费学习笔记（深入）”；
- 用
setTimeout或requestAnimationFrame避免高频执行 - 只在宽度跨过关键阈值（如 768px）时才更新逻辑
- 不推荐作为首选，仅用于兜底
常用媒体查询场景举例
除了宽度，这些也常被监听：
-
"(orientation: portrait)"—— 检测竖屏/横屏 -
"(prefers-reduced-motion: reduce)"—— 用户开启“减少动画”时禁用复杂动效 -
"(hover: hover) and (pointer: fine)"—— 判断是否支持悬停（如桌面鼠标） -
"(width: 375px)"—— 精确匹配特定视口宽度（慎用，依赖设备像素比）
基本上就这些。核心是用 matchMedia + change 事件，语义清晰、性能友好、逻辑可控。
