CSS 伪类

CSS 伪类 :fullscreen 定位并设置以全屏模式显示的元素的样式。如果在全屏模式下设置了多个元素，则此伪类会选择所有元素。

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

伪类 :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 例子</h2>
   <div> 
      <div class="sample-div" id="sample">
      <p>Fullscreen 模式</p>
      </div>
      <br>
      <button onclick="var el=document.getElementById('sample'); el.webkitRequestFullscreen();">点击这里</button>
   </div>
</body>
</html>