Las unidades de ventana gráfica son cosas como 10vw (10% del ancho de la ventana gráfica) o 2vh (2% de la altura de la ventana gráfica). A veces es útil, ya que siempre son relativas a la ventana gráfica. Sin cascada ni influencia de elementos principales.
También existe vmin, que es el menor de vw y vh, y vmax, que es el mayor. Estos valores se pueden usar para cualquier cosa que tenga un valor de longitud, como px o em o% o lo que sea.
Echemos un vistazo a un pequeño patrón de diseño que utiliza vmin.
¡Un bloque de encabezado!
Si configuramos el padding de una <header> al igual que:
header {
padding: 10vmin 1rem;
}Obtenemos algo de relleno fijo (1rem) en el exterior, por lo que, por ejemplo, el texto que se encuentra en el interior nunca toca los bordes. También obtenemos un encabezado que se dimensiona a sí mismo en lo que se siente como una forma apropiada según el espacio de la pantalla.
Grandes y a cargo de las vistas de escritorio grandes.
Cuando hay menos espacio vertical, se acorta para que no interfiera con el contenido.
Las vistas verticales en dispositivos móviles parecen equilibradas.
Paisaje de pantalla pequeña
Súper alto y estrecho todavía se siente bien. Lo que realmente no tiene en cuenta solo la altura de la ventana gráfica.
El tamaño basado en el mínimo de las dos dimensiones de la ventana del navegador parece ser adecuado, en lugar de basarse únicamente en el ancho o el alto.
Aquí está la demostración.
Aquí hay un video: