CSSMediaRule

Baseline 已广泛支持

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

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

CSSRule CSSGroupingRule CSSConditionRule CSSMediaRule

实例属性

继承其祖先 CSSConditionRuleCSSGroupingRuleCSSRule 的属性。

CSSMediaRule.media 只读

返回一个 MediaList,表示样式信息的预期目标介质。

实例方法

没有特定的方法;继承自其祖先 CSSConditionRuleCSSGroupingRuleCSSRule 的方法。

示例

下面的 CSS 包含一个带有单个样式规则的媒体查询。MDN 实时示例基础设施将示例中的所有 CSS 块合并到一个带有 ID css-output 的内联样式中,因此我们首先使用 document.getElementById() 来查找该样式表。myRules[0] 返回一个 CSSMediaRule 对象,我们可以从中获取 mediaText

html
<p id="log"></p>
css
@media (width >= 500px) {
  body {
    color: blue;
  }
}
js
const log = document.getElementById("log");
const myRules = document.getElementById("css-output").sheet.cssRules;
const mediaList = myRules[0]; // a CSSMediaRule representing the media query.
log.textContent += ` ${mediaList.media.mediaText}`;

规范

规范
CSS 条件规则模块第 3 级
# the-cssmediarule-interface

浏览器兼容性