Window.matchMedia()

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

语法

mqList = window.matchMedia(mediaQueryString)

参数

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

返回值

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

使用说明

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

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

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

举例

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

JavaScript

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

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

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

HTML

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

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

Result

参考更多的例子来 通过代码使用媒体查询 (en-US)

规范

Specification Status Comment
CSS Object Model (CSSOM) View Module
Window.matchMedia()
Working Draft Initial definition

浏览器通用性

BCD tables only load in the browser

请参阅