Window：matchMedia() 方法

语法

matchMedia(mediaQueryString)

参数

mediaQueryString

一个指定要解析为 MediaQueryList 的媒体查询的字符串。

就像在 CSS 中一样，任何 媒体特性都必须放在表达式内的括号中。例如：matchMedia("(width <= 600px)") 或 matchMedia("(orientation: landscape)") 可以正常工作，而 matchMedia("width < 600px") 或 matchMedia("orientation: landscape") 则不行。媒体类型（all、print、screen）的关键字以及逻辑运算符（and、or、not、only）不需要放在括号中。

返回值

一个用于媒体查询的新 MediaQueryList 对象。使用此对象的属性和事件来检测匹配项以及随着时间推移监控这些匹配项的变化。

用法说明

您可以使用返回的媒体查询来执行即时检查和事件驱动的检查，以查看 document 是否与媒体查询匹配。

要执行一次性、即时检查以查看 document 是否与媒体查询匹配，请查看 matches 属性的值，如果 document 满足媒体查询的要求，则该值为 true。

如果您需要随时了解 document 是否与媒体查询匹配，您可以改为监视 change 事件是否已发送到该对象。在关于 Window.devicePixelRatio 的文章中 有一个很好的示例。

示例

此示例运行媒体查询 (width <= 600px)，并在 <span> 中显示生成的 MediaQueryList 的 matches 属性的值；因此，如果视口小于或等于 600 像素宽，输出将显示“true”，如果窗口比这更宽，则显示“false”。

JavaScript

let mql = window.matchMedia("(width <= 600px)");

document.querySelector(".mq-value").innerText = mql.matches;

JavaScript 代码将要匹配的媒体查询传递给 matchMedia() 进行编译，然后将 <span> 的 innerText 设置为结果的 matches 属性的值，以便在页面加载时指示 document 是否与媒体查询匹配。

HTML

<span class="mq-value"></span>

一个简单的 <span> 用于接收输出。

.mq-value {
  font:
    18px "Arial",
    sans-serif;
  font-weight: bold;
  color: #8888ff;
  padding: 0.4em;
  border: 1px solid #ddddee;
}

结果

有关其他代码示例，请参阅 以编程方式测试媒体查询。

规范

浏览器兼容性

另见

• 媒体查询
• 从代码中使用媒体查询
• MediaQueryList