Las unidades de ventana gráfica han existido durante algunos años, pero realmente no hemos visto que se usen mucho. Ahora son compatibles con todos los principales navegadores (caniuse) y ofrecen una funcionalidad única que puede ser muy útil en situaciones específicas, especialmente aquellas que involucran un diseño receptivo.
Presentamos las unidades de ventana gráfica
La ventana gráfica es el área de su navegador donde se muestra el contenido real; en otras palabras, su navegador web sin sus barras de herramientas y botones. Las unidades son vw , vh , vmin y vmáx . Todos representan un porcentaje de las dimensiones del navegador (ventana gráfica) y se escalan en consecuencia al cambiar el tamaño de la ventana.
Digamos que tenemos una ventana gráfica de 1000 px (ancho) por 800 px (alto):
- vw - Representa el 1% del ancho de la ventana gráfica. En nuestro caso 50vw =500px.
- vh - Un porcentaje de la altura de la ventana. 50vh =400px.
- vmín - Un porcentaje del mínimo de los dos. En nuestro ejemplo 50vmin =400px ya que estamos en modo horizontal.
- vmáx - Un porcentaje de la dimensión mayor. 50vmáx =500px.
Puede usar estas unidades en cualquier lugar donde pueda especificar un valor en píxeles, como en width , height , margin , font-size y más. El navegador volverá a calcularlos al cambiar el tamaño de la ventana o al rotar el dispositivo.
1. Ocupando toda la altura de la página
Cada desarrollador frontend ha tenido problemas con esto en un momento u otro. Tu primer instinto es hacer algo como esto:
#elem{
height: 100%;
} Sin embargo, esto no funcionará a menos que agreguemos una altura del 100 % al cuerpo. y html también, que no es muy elegante y podría romper el resto de su diseño. Con vh eso es bastante fácil Simplemente establezca su altura en 100vh y siempre será tan alto como tu ventana.
#elem{
height: 100vh;
} Esto es perfecto para esas imágenes de héroes de pantalla completa que parecen estar de moda en estos días.
2. Tamaño del niño relativo al navegador, no al padre
En ciertas situaciones, desearía cambiar el tamaño de un elemento secundario en relación con la ventana, y no con su elemento primario. De manera similar al ejemplo anterior, esto no funcionará:
#parent{
width: 400px;
}
#child{
/* This is equal to 100% of the parent width, not the whole page. */
width: 100%;
} Si usamos vw en cambio, nuestro elemento secundario simplemente desbordará a su elemento principal y ocupará todo el ancho de la página:
#parent{
width: 400px;
}
#child{
/* This is equal to 100% of page, regardless of the parent size. */
width: 100vw;
} 
3. Tamaño de fuente adaptable
¡Las unidades de ventana gráfica también se pueden usar en texto! En este ejemplo, hemos configurado el tamaño de fuente en vw creando una increíble capacidad de respuesta de texto en una línea de CSS. ¡Adiós Fittext!
h2.responsive-text{
font-size: 6vw;
}
h4.responsive-text{
font-size: 3vw;
} 
4. Centrado vertical receptivo
Al configurar el ancho, la altura y los márgenes de un elemento en unidades de ventana gráfica, puede centrarlo sin usar ningún otro truco.
Aquí, este rectángulo tiene una altura de 60vh y márgenes superior e inferior de 20vh , lo que suma un 100vh (60 + 2*20) haciéndolo siempre centrado, incluso al cambiar el tamaño de la ventana.
#rectangle{
width: 60vw;
height: 60vh;
margin: 20vh auto;
} 
5. Columnas de igual ancho
Puede utilizar las unidades de ventana gráfica para crear cuadrículas receptivas. Se comportan de manera similar a los basados en porcentajes, pero siempre tendrán un tamaño relativo a la ventana gráfica. Entonces, por ejemplo, podría colocarlos en un elemento principal que sea más ancho que la ventana y aún así hacer que la cuadrícula conserve su ancho adecuado. Esto puede ser útil cuando se construyen controles deslizantes de pantalla completa.
Esta técnica requiere que los elementos tengan float:left; para alinear los elementos uno al lado del otro:
.column-2{
float: left;
width: 50vw;
}
.column-4{
float: left;
width: 25vw;
}
.column-8{
float: left;
width: 12.5vw;
} 
Conclusión
Las unidades de ventana gráfica tienen sus usos y vale la pena experimentar con ellas. Son fáciles de entender y pueden ser extremadamente útiles en ciertos escenarios, donde las soluciones con técnicas CSS alternativas serán más difíciles o imposibles de implementar.