Window.matchMedia()

mediaQueryString

一个被用于媒体查询解析的字符串。

一个用来媒体查询的新的MediaQueryList对象

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

要执行一次瞬时检查以查看文档是否与媒体查询匹配，请查看matches属性的值，当 document 满足媒体查询条件的时候将会返回true。

如果你需要始终了解 document 是否与媒体查询匹配，则可以查看将要传递给对象的change 事件。Window.devicePixelRatio上的文章中有一个很好的例子。

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

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

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

JavaScript 代码只需将要匹配的媒体查询字符串传递到matchMedia()进行编译，然后设置<span>的innerText为matches属性结果的值，以便它表明此 document 在此刻页面加载完成时是否与媒体查询所匹配。

<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
• MediaQueryListListener