:fullscreen

语法

:fullscreen {
  /* ... */
}

使用说明

当元素在全屏模式和正常模式之间切换时，:fullscreen 伪类允许你配置样式表以自动调整内容的大小、样式或布局。

示例

在这个示例中，按钮的颜色根据文档是否处于全屏模式而改变。这是在不需要使用 JavaScript 显式应用样式更改的情况下完成的。

HTML

该页面的 HTML 如下所示：

<h1>MDN Web 文档演示：:fullscreen 伪类</h1>

<p>
  此演示使用 <code>:fullscreen</code> 伪类完全使用 CSS
  来实现自动更改用于开启和关闭全屏模式的按钮的样式。
</p>

<button id="fs-toggle">切换全屏</button>

ID 为 "fs-toggle" 的 <button> 将根据文档是否处于全屏模式而在淡红色和淡绿色之间切换。

CSS

CSS 中实现这一功能的关键在于两条规则。第一条规则用于在元素不处于全屏状态时设置“切换全屏模式”按钮的背景颜色。这里使用了 :not(:fullscreen) 伪类，以查找未应用 :fullscreen 伪类的元素。

#fs-toggle:not(:fullscreen) {
  background-color: #afa;
}

当文档处于全屏模式时，将应用以下 CSS，将背景颜色设置为淡红色。

#fs-toggle:fullscreen {
  background-color: #faa;
}

规范

浏览器兼容性

参见

• Fullscreen API
• Fullscreen API 指南
• :not
• ::backdrop
• DOM API：Element.requestFullscreen()、Document.exitFullscreen() 和 Document.fullscreenElement
• allowfullscreen 属性