Window.matchMedia() - Web API 接口参考 编辑

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

语法

mqList = window.matchMedia(mediaQueryString)

参数

mediaQueryString

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

返回值

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

使用说明

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

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

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

举例

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

JavaScript

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

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

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

HTML

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

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

CSS

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

Result

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

规范

浏览器通用性

BCD tables only load in the browser

请参阅

• 媒体查询
• 通过代码使用媒体查询
• MediaQueryList
• MediaQueryListListener