使用 `matchMedia()` 方法检测 JavaScript 中的媒体状态

matchMedia() 是什么

window.matchMedia() 是一个 web api ， 用于检测和监听 css媒体查询 的 匹配情况。

他可以让js知道当前页面 是否某个媒体查询条件， 屏幕宽度/方向/分辨率

const mq = window.meatchMedia(string)

string：一个媒体查询字符串，语法和 CSS 里写的一样，比如 “screen and (max-width: 768px)”。

mq 对象

主要属性：

.matches → true / false，表示当前是否匹配。

.media → 返回查询字符串本身。

主要方法：

.addEventListener(“change”, callback) → 当匹配状态变化时触发。

（旧方法）.addListener(callback)，已被废弃。

检测一次

const mq = window.matchMedia("(max-width: 768px)");

if (mq.matches) {
  console.log("当前屏幕宽度小于或等于768px");
} else {
  console.log("当前屏幕宽度大于768px");
}

监听变化

const mq = window.matchMedia("(max-width: 768px)")

mq.addEventListener("change", (event)=>{
if(event.matches){
	console.log("屏幕变窄：≤768px");
}else{
 	console.log("屏幕变宽：>768px");
}

})

css 媒体查询

body {
  background: white;
}
@media (max-width: 768px) {
  body {
    background: lightblue;
  }
}

js:
const mq = window.matchMedia("(max-width:768px)")

function mqChange = (mq){
	document.body.style.backgroundColor = mq.matches ? 'lightblue' : 'white'
}

mq.addEventListener('change', mqChange)
mqChange(mq)

主要应用场景：

• 响应式设计的补充：在css不方便实现时，用js监听屏幕大小
• 按需加载资源：只在大屏幕下加载高清图
• 设备功能检测： 检测 prefers-colors-scheme (深色/浅色模式)

const mq = window.matchMedia("(prefers-colors-scheme: dark)")

if(mq.matches){
	  console.log("用户偏好深色模式");
}