Window.matchMedia()

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

语法

mqList = window.matchMedia(mediaQueryString)

参数

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

返回值

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

使用说明

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

要执行一次瞬时检查以查看文档是否与媒体查询匹配,请查看matches属性的值,当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属性结果的值,以便它表明此document在此刻页面加载完成时是否与媒体查询所匹配。

HTML

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

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

Result

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

规范

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

浏览器通用性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
matchMediaChrome Full support 9Edge Full support 12Firefox Full support 6IE Full support 10Opera Full support 12.1Safari Full support 5.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 6Opera Android Full support 12.1Safari iOS Full support 5Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

请参阅