La pseudo-clase :fullscreen se utiliza para incluir un elemento que se muestra cuando el naqvegador está a pantalla completa.
En este ejemplo vemos como se utiliza:
HTML
<div class="container">
<p><em>Haz clic para ver el elemento en pantalla completa</em></p>
<div class="elemento" id="element"><p>Se cambiará el color en pantalla completa</p></div>
<br />
<button onclick="var el = document.getElementById('element'); el.requestFullscreen();">
Ir a pantalla Completa
</button>
</div>
CSS
.container {
margin: 20px auto;
max-width: 500px;
}
.elemento{
padding: 20px;
height: 500px;
width: 100%;
background-color: #008ec2;
}
.elemento p {
text-align: center;
color: white;
font-size: 3em;
}
.elemento:-ms-fullscreen p {
visibility: visible;
}
.elemento:fullscreen {
background-color: pink;
width: 100vw;
height: 100vh;
}
Explicación
Utilizamos :fullscreen para seleccionar y diseñar el elemento que se mostrará a pantalla completa.
En este ejemplo creamos un elemento con fondo rosa que ocupa toda la pantalla.
Puedes copiar y probar este código en nuestro editor online para que lo entiendas mejor: