:fullscreen

Avatar of Mojtaba Seyedi
Mojtaba Seyedi

DigitalOcean 为您的旅程的每个阶段提供云产品。立即开始使用 $200 免费试用额度!

:fullscreen CSS 伪类允许您选择和设置当前处于全屏模式的任何元素的样式。您知道那些您允许图像或其他元素占据全屏的时候吗?好吧,我们可以设置元素处于该状态时的样式,这就是 :fullscreen 允许我们做的事情。

.element:fullscreen {
  font-size: 3em;
  text-align: center;
}

并且,在有多个元素处于全屏模式的情况下,这会选择它们全部。

全屏模式和全屏 API

嘿,这里有一个重要提示。在操作系统级别使应用程序全屏和使元素全屏之间存在差异。如果您切换到浏览器的全屏模式(在 MacOS 上为 +CMD+F,在 Windows 上为 F11),并且您使用 :fullscreen 选择了一个元素,它 **将不会匹配** 该元素。相反,当元素使用 全屏 API 进入全屏模式时,它会匹配 :fullscreen

let element = document.querySelector(".element");

element.requestFullscreen();

因此,假设我们想将 <section> 元素内部的内容带到视窗的中心,当它处于全屏模式时。我们使用 :fullscreen 将其作为目标,然后相应地设置样式。

section:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
}

我们可以选择全屏元素的子元素

类似地,我们可以选择处于全屏模式的元素的子元素,例如 <section> 元素中的段落。

section:fullscreen p {
  font-size: 2em;
}

技巧:仅在处于全屏模式时设置样式

如果我们想要仅在元素处于全屏模式时应用样式,我们可以将其与 :not 伪类一起使用。

section:not(:fullscreen) {
  background: #eee;
}

浏览器支持

一些较旧的浏览器可能需要供应商前缀,例如 Internet Explorer 11 中的 :-ms-fullscreen

IEEdgeFirefoxChromeSafariOpera
11 1全部64 271 36 458 5
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mobile
全部9162
来源:caniuse

1 支持为 :-ms-fullscreen
2 在 Firefox 9-63 中支持为 :-moz-full-screen
3 在 Chrome 15-70 中支持为 :-webkit-full-screen
4 在 Safari 6+ 中支持为 :-webkit-full-screen
5 在 Opera 15-57+ 中支持为 :-webkit-full-screen

演示

以下演示展示了如何在全屏模式下控制图像元素的背景。点击按钮切换图像的全屏模式,并查看全屏样式的生效情况。

更多信息