Window: matchMedia() 方法

mediaQueryString

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

一个针对媒体查询的新 MediaQueryList 对象。使用该对象的属性和事件来检测匹配，并监控这些匹配随时间的变化。

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

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

如果您需要始终了解文档是否匹配媒体查询，则可以改为观察 change 事件是否传递给该对象。在关于 Window.devicePixelRatio 的文章中，有一个很好的例子。

此示例运行媒体查询 (max-width: 600px)，并在 <span> 中显示结果 MediaQueryList 的 matches 属性的值；因此，如果视窗宽度小于或等于 600 像素，则输出将显示“true”，如果视窗宽度大于 600 像素，则输出将显示“false”。

let mql = window.matchMedia("(max-width: 600px)");

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

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

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

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

.mq-value {
  font:
    18px arial,
    sans-serif;
  font-weight: bold;
  color: #88f;
  padding: 0.4em;
  border: 1px solid #dde;
}

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

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