MediaQueryList: media 属性

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

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

值

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

此示例运行媒体查询 (width <= 600px)，并在一个 <span> 中显示生成的 MediaQueryList 的 media 属性的值。

let mql = window.matchMedia("(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: #8888ff;
  padding: 0.4em;
  border: 1px solid #ddddee;
}

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

此页面最后修改于 2025 年 10 月 13 日，由 MDN 贡献者修改。