CSS - 伪类 :fullscreen

CSS 伪类选择器:fullscreen 用于目标和样式化以全屏模式显示的元素。如果多个元素设置为全屏模式，此伪类将选择所有这些元素。

通常，此伪类与::backdrop伪元素一起使用，以设置全屏元素后面背景的样式。

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

仅 Firefox 浏览器支持选择全屏堆栈中的所有元素。

语法

:fullscreen {
   /* ... */ 
}

CSS :fullscreen 示例

以下示例演示了:fullscreen伪类的用法。

一个名为sample-div的div元素，其样式设置为浅灰色。
此div上的p元素设置为不可见。
通过 JavaScript 添加一个按钮，并使用id=sample进行标识。
单击按钮时，:fullscreen 伪类将应用于div和p元素，从而使其以lightsalmon颜色显示全屏，并且p元素的文本在屏幕上可见。
按Esc键返回。

<html>
<head>
<style>
   .sample-div {
      padding: 10px;
      height: 200px;
      width: 95%;
      background-color: lightgrey;
   }
   .sample-div p {
      visibility: hidden;
      position: absolute;
      top: 40%;
      width: 100%;
      text-align: center;
      font-size: 1.5em;
      color: black;
   }
   .sample-div:fullscreen {
      background-color: lightsalmon;
      width: 100vw;
      height: 100vh;
   }
   .sample-div:fullscreen p {
      visibility: visible;
   }
</style>
</head>
<body>
   <h2>:fullscreen example</h2>
   <div> 
      <div class="sample-div" id="sample">
      <p>Fullscreen mode</p>
      </div>
      <br>
      <button onclick="var el=document.getElementById('sample'); el.webkitRequestFullscreen();">Click here</button>
   </div>
</body>
</html>

打印页面