¿Cómo funcionan las unidades vw (ancho del viewport) y vh (alto del viewport) en CSS?

Las unidades vw (viewport width - ancho del viewport) y vh (viewport height - alto del viewport) en CSS son unidades de longitud relativas a las dimensiones de la ventana gráfica (viewport) del navegador. El viewport es el área visible de la página web en la pantalla del usuario.

Cómo funcionan:

• 1vw: Equivale al 1% del ancho del viewport.
  • Por lo tanto, 50vw sería el 50% del ancho del viewport, y 100vw sería el 100% del ancho del viewport.
• 1vh: Equivale al 1% de la altura del viewport.
  • De manera similar, 50vh sería el 50% de la altura del viewport, y 100vh sería el 100% de la altura del viewport.

La principal diferencia con las unidades de porcentaje (%) es que los porcentajes para propiedades como width y height son relativos al tamaño del elemento padre, mientras que vw y vh son siempre relativas al tamaño del viewport, sin importar dónde esté anidado el elemento en el DOM.

Consideraciones:

• 100vw puede a veces causar un desbordamiento horizontal si hay una barra de desplazamiento vertical visible, ya que el ancho de la barra de desplazamiento puede ser restado del espacio disponible para el contenido, pero 100vw se calcula antes de esta resta en algunos casos.
• Existen también las unidades vmin (el menor valor entre 1vw o 1vh) y vmax (el mayor valor entre 1vw o 1vh), que ofrecen aún más flexibilidad para diseños adaptables.