CSS - 伪类 :fullscreen

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

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

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

全屏堆栈中的所有元素仅在 Firefox 浏览器上受支持。

语法


:fullscreen {
	 	/* ... */	
}

CSS ：全屏示例

以下示例演示了伪类 :fullscreen 的用法。在此示例中：

名为 sample-div 的 div 的样式为浅灰色。
此 div 上的 <p> 元素设置为不可见。
一个按钮是通过 javascript 添加的，并使用 id=sample 进行标识。
当单击按钮时，会在 div 和 p 元素上应用 :fullscreen 伪类，从而使其以浅鲑鱼色全屏显示，并且 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>

打印本页