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
。
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
11 1 | 全部 | 64 2 | 71 3 | 6 4 | 58 5 |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mobile |
---|---|---|---|---|
全部 | 否 | 91 | 否 | 62 |
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
。演示
以下演示展示了如何在全屏模式下控制图像元素的背景。点击按钮切换图像的全屏模式,并查看全屏样式的生效情况。