全屏 | :fullscreen

这是一种实验技术

由于该技术的规格不稳定，请查看兼容性表以了解各种浏览器的使用情况。还请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

:fullscreenCSS伪类选择显示在浏览器全屏模式下的任何元件。

/* Selects any <div> as long as it is being displayed in fullscreen mode */
/* Implemented in Gecko, Edge/IE, and WebKit/Chrome using prefixes */
/* Edge also supports the non-prefixed version */
div:-webkit-full-screen {
  background-color: pink;
}

div:-moz-full-screen {
  background-color: pink;
}

div:-ms-fullscreen {
  background-color: pink;
}

div:fullscreen {
  background-color: pink;
}

注意：W3C规范使用单个单词:fullscreen， 没有破折号 ，但Webkit和Gecko实验实现都使用带有两个单词的前缀变体，分别用短划线:-webkit-full-screen和:-moz-full-screen。Microsoft Edge和Internet Explorer分别使用标准约定:fullscreen和:-ms-fullscreen。

语法

:fullscreen

例

HTML

<div id="fullscreen">
  <h1>:fullscreen Demo</h1>
  <p> This will become big red text when the browser is in fullscreen mode.</p>
  <button id="fullscreen-button">Enter Fullscreen</button>
</div>

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;
}

结果

（如果'进入全屏'按钮不起作用，请点击此处）

规范

浏览器兼容性