:fullscreen - CSS（层叠样式表）

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

总结

css伪类:fullscreen应用于当前处于全屏显示模式的元素。 它不仅仅选择顶级元素，还包括所有已显示的栈内元素。

W3C标准使用不带破折号的单词:fullscreen，但Webkit和Gecko应用接口各自使用前缀带有破折号的变量：:-webkit-full-screen 和:-moz-full-screen。微软的Edge和Internet Explorer各自使用标准语法：:fullscreen和:-ms-fullscreen。

语法

:fullscreen

例子

HTML

<div id="fullscreen">
  <h1>:fullscreen Demo</h1>
  <p> This will become a big red text when on fullscreen.</p>
  <button id="fullscreen-button">Enter Fullscreen</button>
</div>

Javascript

var fullscreenButton = document.getElementById("fullscreen-button");
var fullscreenDiv    = document.getElementById("fullscreen");
var fullscreenFunc   = fullscreenDiv.requestFullscreen;
if (!fullscreenFunc) {
  ['mozRequestFullScreen',
   'msRequestFullscreen',
   'webkitRequestFullScreen'].forEach(function (req) {
     fullscreenFunc = fullscreenFunc || fullscreenDiv[req];
   });
}
function enterFullscreen() {
  fullscreenFunc.call(fullscreenDiv);
}
fullscreenButton.addEventListener('click', enterFullscreen);

Browser-Specific CSS

#fullscreen:-moz-full-screen {
  padding: 42px;
  background-color: pink;
  border:2px solid #f00;
  font-size: 200%;
}
#fullscreen:-ms-fullscreen {
  padding: 42px;
  background-color: pink;
  border:2px solid #f00;
  font-size: 200%;
}
#fullscreen:-webkit-full-screen {
  padding: 42px;
  background-color: pink;
  border:2px solid #f00;
  font-size: 200%;
}

#fullscreen:-moz-full-screen > h1 {
  color: red;
}
#fullscreen:-ms-fullscreen > h1 {
  color: red;
}
#fullscreen:-webkit-full-screen > h1 {
  color: red;
}

#fullscreen:-moz-full-screen > p {
  color: DarkRed;
}
#fullscreen:-ms-fullscreen > p {
  color: DarkRed;
}
#fullscreen:-webkit-full-screen > p {
  color: DarkRed;
}

#fullscreen:-moz-full-screen > button {
  display: none;
}
#fullscreen:-ms-fullscreen > button {
  display: none;
}
#fullscreen:-webkit-full-screen > button {
  display: none;
}

CSS

#fullscreen:fullscreen {
  padding: 42px;
  background-color: pink;
  border:2px solid #f00;
  font-size: 200%;
}

#fullscreen:fullscreen > h1 {
  color: red;
}

#fullscreen:fullscreen > p {
  color: DarkRed;
}

#fullscreen:fullscreen > button {
  display: none;
}

结果

(If the 'Enter Fullscreen' button doesn't work, try here)

特点

特点	情况	评论
Fullscreen API :fullscreen	Living Standard	Initial definition

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Desktop
Mobile

特性	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
基本支持	15.0 -webkit^[1]	12	9.0 (9.0)-moz^[1] 47.0 (47.0)^[2]	11 -ms^[3]	?	6.0 -webkit^[1]
全屏下选取所有元素	?	12	43 (43)	11	?	?

特性	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
基本支持	?	9.0 (9.0) 47.0 (47.0)^[2]	未实现	未实现	未实现
全屏下选取所有元素	?	43.0 (43)	?	?	?

[1] Webkit和Gecko前缀版本在full和screen之间带有破折号, 但W3C标准使用一个单词：:fullscreen, :-webkit-full-screen, :-moz-full-screen.

[2] Gecko 47.0 (Firefox 47.0 / Thunderbird 47.0 / SeaMonkey 2.44) 通过参数full-screen-api.unprefix.enabled使用不带前缀的伪类, 默认为false.

[3] Internet Explorer使用前缀-ms，但在full和screen之间没有破折号:-ms-fullscreen.