JavaScript实现屏幕响应与媒体查询方法

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《JavaScript如何实现媒体查询及屏幕变化响应》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

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 并手动判断宽度，但注意节流：

• 用 setTimeout 或 requestAnimationFrame 避免高频执行
• 只在宽度跨过关键阈值（如 768px）时才更新逻辑
• 不推荐作为首选，仅用于兜底

常用媒体查询场景举例

除了宽度，这些也常被监听：

• "(orientation: portrait)" —— 检测竖屏/横屏
• "(prefers-reduced-motion: reduce)" —— 用户开启“减少动画”时禁用复杂动效
• "(hover: hover) and (pointer: fine)" —— 判断是否支持悬停（如桌面鼠标）
• "(width: 375px)" —— 精确匹配特定视口宽度（慎用，依赖设备像素比）

基本上就这些。核心是用 matchMedia + change 事件，语义清晰、性能友好、逻辑可控。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~