Unidades de la ventana gráfica: vw, vh y dvh

Las unidades del viewport son relativas al tamaño del viewport del navegador (el área visible de la ventana del navegador). Permiten crear diseños y tipografías que se escalan con el espacio disponible en la pantalla.

1vw = el 1 % del ancho del viewport. 100vw ocupa todo el ancho del viewport. Es útil para elementos de ancho completo sin las complicaciones de los porcentajes.

1vh = el 1 % de la altura del viewport. 100vh ocupa toda la altura del viewport. Es una opción clásica para secciones principales y modales a pantalla completa.

En los navegadores móviles, la altura del viewport cambia cuando la interfaz del navegador (la barra de direcciones) aparece o desaparece durante el desplazamiento. 100vh puede incluir o excluir la interfaz del navegador de forma incoherente, lo que hace que parte del contenido quede oculta.

dvh (altura dinámica del viewport) se actualiza dinámicamente para reflejar la altura visible real después de que la interfaz del navegador se ajuste. Resuelve el problema de 100vh en móviles.

CSS también proporciona svh (altura del viewport pequeño: excluye siempre la interfaz del navegador) y lvh (altura del viewport grande: como si la interfaz estuviera oculta). Estas unidades permiten controlar con precisión el comportamiento del viewport móvil.

Utilizar vw para el tamaño de fuente crea una tipografía que se escala con la pantalla:

100vw incluye el ancho de la barra de desplazamiento en los equipos de escritorio. Si se utiliza sin cuidado, esto provoca un desbordamiento horizontal. En los elementos de bloque, prefiera width: 100% y reserve vw para casos específicos.

1vmin = el 1 % de la dimensión menor del viewport (ancho o altura). 1vmax = el 1 % de la dimensión mayor. Son útiles para contenedores cuadrados que se adaptan a los cambios de orientación.

Al igual que con las variantes de altura, CSS proporciona svw, lvw y dvw para el ancho. Las variantes dinámicas (dvw, dvh) son las más útiles en dispositivos móviles.

Patrones habituales con unidades del viewport:

• min-height: 100dvh: secciones a pantalla completa seguras en móviles
• height: 100svh: paneles de interfaz fijos
• font-size: clamp(1rem, 2.5vw, 2rem): encabezados fluidos
• width: min(800px, 90vw): contenedores de ancho seguro

¿Por qué se prefiere dvh a vh para las secciones móviles a pantalla completa?

vw y vh equivalen al 1 % del ancho y la altura del viewport, respectivamente. En móviles, vh no es fiable debido a la interfaz del navegador. Utilice dvh para diseños a pantalla completa dinámicos y precisos en móviles. vmin y vmax responden a la dimensión menor o mayor del viewport.