CSSMediaRule

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

CSSMediaRule 接口表示一个单独的 CSS @media 规则。

实例属性

继承其父接口 CSSConditionRule、CSSGroupingRule 和 CSSRule 的属性。

CSSMediaRule.media 只读: 返回一个表示样式信息所针对的目标媒介的 MediaList 对象。

实例方法

没有特定的方法；它继承其父接口 CSSConditionRule、CSSGroupingRule 和 CSSRule 的方法。

下面的 CSS 包含一个带有样式规则的媒体查询。由于该规则存在于文档中最后添加的样式表中，所以它会成为文档中最后一个样式表返回的第一个 CSSRule（即 document.styleSheets[document.styleSheets.length-1].cssRules 的第一个）。myRules[0] 返回一个 CSSMediaRule 对象，我们可以从中获取 mediaText。

html

<p id="log"></p>

css

@media (width >= 500px) {
  body {
    color: blue;
  }
}

const log = document.getElementById("log");
const myRules = document.styleSheets[document.styleSheets.length - 1].cssRules;
const mediaList = myRules[0]; // 一个表示该媒体查询的 CSSMediaRule 对象。
log.textContent += ` ${mediaList.media.mediaText}`;