Window matchMedia() 方法

定义和用法

matchMedia() 方法返回带有查询结果的 MediaQueryList。

媒体查询

matchMedia() 方法的媒体查询可以是 CSS @media 规则的任何媒体特性，例如 min-height、min-width、orientation 等。

实例

matchMedia("(max-height: 480px)").matches);

matchMedia("(max-width: 640px)").matches);

实例

例子 1

屏幕/视口是否大于 700 像素宽：

if (window.matchMedia("(max-width: 700px)").matches) {
  // 视口宽度小于或等于 700 像素
} else {
  // 视口宽度大于 700 像素
}

亲自试一试

例子解释

本例运行媒体查询并将其与当前窗口状态进行比较。

如需在窗口状态更改时运行响应式媒体查询，请将事件侦听器添加到 MediaQueryList 对象（请参阅下方“更多实例”）：

例子 2

如果视口小于或等于 500 像素宽，则将背景颜色设置为黄色，否则设置为粉红色：

// 创建匹配函数
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}

// // 创建 MediaQueryList 对象
const mmObj = window.matchMedia("(max-width: 700px)")

// 在运行时调用 match 函数：
myFunction(mmObj);

// 添加 match 函数作为状态变化的监听器：
mmObj.addListener(myFunction);