svh, lvh y dvh son unidades de altura en CSS que definen el tamaño de un elemento basándose en la altura del viewport (área visible del navegador). Pertenecen al grupo de unidades viewport, junto con vw (viewport width), pero se diferencian en su cálculo. Comprender estas diferencias es crucial para un diseño web responsive, especialmente en dispositivos móviles.
vh (viewport height): Inicialmente, vh representaba el 1% de la altura inicial del viewport. Sin embargo, en dispositivos móviles, la interfaz de usuario (UI) del navegador puede cambiar de tamaño al desplazarse, causando inconsistencias en el cálculo. Actualmente, vh se basa en la altura máxima del viewport, cuando la UI está minimizada. Esto puede provocar que el contenido se desborde cuando la UI es más grande.
lvh (large viewport height): lvh representa el 1% de la altura máxima del viewport, similar al funcionamiento actual de vh. Es útil cuando se desea que un elemento mantenga la altura del viewport máximo, independientemente del tamaño de la UI.
svh (small viewport height): svh representa el 1% de la altura mínima del viewport, cuando la UI está maximizada. Permite diseñar elementos que se ajusten a la pantalla incluso con una UI grande, evitando que el contenido quede oculto.
dvh (dynamic viewport height): dvh representa el 1% de la altura dinámica del viewport, calculándose continuamente según el tamaño actual, incluso con cambios en la UI. Aunque parece ideal para ajustar el contenido al viewport, su cambio constante puede causar saltos y afectar el rendimiento. Se recomienda un uso cauteloso, ya que puede generar movimientos bruscos al desplazarse.
En resumen, svh y lvh ofrecen un enfoque más estable para definir la altura según el viewport, mientras que dvh debe usarse con precaución. La elección depende del diseño y la experiencia de usuario deseados. lvh mantiene el tamaño, svh se ajusta a la UI y dvh cambia dinámicamente.
