close

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

CSSMediaRule

基线 广泛可用

自 2015年7月 起,此特性已在主流浏览器中得到支持,可在大多数设备和浏览器版本中正常使用。

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

CSSRule CSSGroupingRule CSSConditionRule CSSMediaRule

实例属性

继承其父接口 CSSConditionRuleCSSGroupingRuleCSSRule 的属性。

CSSMediaRule.media 只读

返回一个表示样式信息所针对的目标媒介的 MediaList 对象。

实例方法

没有特定的方法;它继承其父接口 CSSConditionRuleCSSGroupingRuleCSSRule 的方法。

示例

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

规范

规范
CSS Conditional Rules Module Level 3
# the-cssmediarule-interface

浏览器兼容性