MediaQueryList：media 属性

media 是 MediaQueryList 接口的一个只读属性，它是一个字符串，表示序列化后的媒体查询。

值

表示序列化后的媒体查询的字符串。

此示例运行媒体查询 (max-width: 600px)，并在 <span> 中显示结果 MediaQueryList 的 media 属性的值。

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

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

JavaScript 代码将要匹配的媒体查询传递给 matchMedia() 进行编译，然后将 <span> 的 innerText 设置为结果的 media 属性的值。

html

<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;
}

规范
CSSOM 视图模块 # dom-mediaquerylist-media

BCD 表格仅在启用 JavaScript 的浏览器中加载。