Window.matchMedia()

WindowmatchMedia() 方法返回一个新的 MediaQueryList 对象,表示指定的媒体查询字符串解析后的结果。返回的 MediaQueryList 可被用于判定 Document 是否匹配媒体查询,或者监控一个 document 来判定它匹配了或者停止匹配了此媒体查询。

语法

js
matchMedia(mediaQueryString)

参数

mediaQueryString

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

返回值

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

使用说明

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

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

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

示例

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

JavaScript

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

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

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

HTML

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

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

结果

参考更多的例子来 通过代码使用媒体查询

规范

Specification
CSSOM View Module
# dom-window-matchmedia

浏览器兼容性

BCD tables only load in the browser

参见