全屏模式
在全屏模式下应用样式于元素。
- 使用
:fullscreen
CSS 伪元素选择器选择并为显示在全屏模式下的元素设置样式。 - 使用
<button>
和Element.requestFullscreen()
创建一个按钮,使元素进入全屏模式以预览样式。
<div class="container">
<p><em>点击下面的按钮将元素进入全屏模式。</em></p>
<div class="element" id="element"><p>我在全屏模式下改变颜色!</p></div>
<br />
<button onclick="var el = document.getElementById('element'); el.requestFullscreen();">
进入全屏!
</button>
</div>
.container {
margin: 40px auto;
max-width: 700px;
}
.element {
padding: 20px;
height: 300px;
width: 100%;
background-color: skyblue;
box-sizing: border-box;
}
.element p {
text-align: center;
color: white;
font-size: 3em;
}
.element:-ms-fullscreen p {
visibility: visible;
}
.element:fullscreen {
background-color: #e4708a;
width: 100vw;
height: 100vh;
}