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>

列印頁面