Unidades vw y vh en CSS
Las unidades vw y vh permiten establecer
el tamaño relativo al área de visualización de la ventana
del navegador. Veamos un ejemplo.
Supongamos que tenemos un div:
<div></div>
Vamos a darle un ancho igual a la mitad del ancho del área de visualización y una altura igual a la mitad de la altura del área de visualización:
div {
width: 50vw;
height: 50vh;
margin: 30px auto;
border: 1px solid red;
}
Veamos lo que obtenemos:
Se da un div. Establezca un margen superior igual a
30% de la altura del área de visualización.
Se da un div. Establezca un ancho y una altura iguales a
70% del ancho del área de visualización.