Qué son vw y vh

En desarrollo web, vw (viewport width) y vh (viewport height) son unidades de medida relativas al tamaño de la ventana gráfica o área visible del navegador. Se utilizan para crear diseños que se adapten directamente a las dimensiones de la pantalla del usuario.

Cómo funciona

1. vw: Representa un porcentaje del ancho del viewport. 1vw equivale al 1% del ancho visible de la ventana.
2. vh: Representa un porcentaje de la altura del viewport. 1vh equivale al 1% de la altura visible de la ventana.
3. Cálculo dinámico: Los valores cambian automáticamente si el usuario redimensiona la ventana o gira el dispositivo.

Usos principales

• Crear elementos que ocupen toda la pantalla (width: 100vw; height: 100vh;).
• Ajustar tipografía y tamaños de elementos de forma proporcional a la ventana.
• Diseñar fondos y secciones que se adapten al tamaño del dispositivo.

Ventajas

• Escalan de manera automática según el tamaño de la ventana.
• Útiles para diseños fullscreen o hero sections.

Consideraciones

• En dispositivos móviles, la altura del viewport puede variar según la visibilidad de la barra de navegación del navegador.
• Pueden generar barras de desplazamiento no deseadas si se combinan con márgenes o paddings mal calculados.

Las unidades vw y vh son ideales para diseños fluidos que deben adaptarse completamente a las dimensiones de la pantalla, ofreciendo control preciso y comportamiento dinámico en cualquier dispositivo.