Tal y como vimos en el artículo sobre las unidades de medida en CSS, las unidades vh y vw son unidades relativas, por lo que se ajustan al tamaño del viewport (área visible del navegador o tamaño de pantalla). En CSS, representan el porcentaje del área visible del usuario. En este artículo, veremos qué son las unidades vh y vw, cómo se utilizan en CSS y ejemplos de aplicación prácticos.
1. Unidades vh y vw en CSS ¿Qué son?
Como decíamos anteriormente, las unidades vh y vw son unidades de medida relativas en CSS que se utilizan para dimensionar elementos en relación con el tamaño del viewport del navegador. Veamos sus características de forma detallada:
- vh (Viewport Height): Una unidad vh representa el 1% del alto del viewport. Por lo tanto, 1vh es igual al 1% del alto total del viewport del usuario. Esta unidad es útil para dimensionar elementos en función de la altura de la ventana del navegador.
- vw (Viewport Width): Por otro lado, una unidad vw representa el 1% del ancho del viewport. Así, 1vw es igual al 1% del ancho total del viewport del usuario. Esta unidad es especialmente útil para dimensionar elementos en función del ancho de la ventana del navegador.
2. Cómo se usan las unidades vh y vw en CSS
Las unidades vh y vw se suelen usar para dimensionar alturas, anchuras o márgenes. Veamos algunos ejemplos:
- Dimensionamiento de altura y anchura: Se pueden especificar valores de altura y anchura utilizando vh y vw, lo que permite crear diseños que se escalan automáticamente según el tamaño de la ventana del navegador.
.elemento {
height: 50vh; /* La altura del elemento será el 50% del alto del viewport */
width: 75vw; /* El ancho del elemento será el 75% del ancho del viewport */
}
- Espaciado vertical y horizontal: Se pueden definir márgenes y espaciados utilizando vh y vw, lo que garantiza que los elementos mantengan proporciones adecuadas en diferentes tamaños de pantalla.
.contenedor {
margin-top: 10vh; /* Margen superior del 10% del alto del viewport */
margin-right: 5vw; /* Margen derecho del 5% del ancho del viewport */
}
3. Diferencias entre usar las unidades vh, vw y %
La diferencia principal entre usar vh, vw y % radica en la referencia de dimensionamiento. Mientras que % se basa en el tamaño del elemento contenedor, vh y vw se refieren al tamaño del viewport (área visible del navegador).
Por ejemplo, si un elemento tiene una altura del 50% en relación con su contenedor, esta altura cambiará si el contenedor cambia de tamaño. En cambio, si se establece una altura del 50vh para un elemento, esta altura será siempre el 50% del alto del viewport, independientemente del tamaño del contenedor. Lo mismo se aplica al ancho con vw.
4. Ejemplos prácticos de uso
Las unidades vh y vw son útiles en situaciones donde se requiere diseño responsivo. Algunos ejemplos prácticos de su uso son los siguientes:
4.1. Centrar un texto según el tamaño del viewport (con line-height)
Uno de los diseños que podemos necesitar es un texto centrado según el tamaño del viewport. Lo ideal para centrar textos en relación con el tamaño del viewport es utilizar la propiedad line-height para establecer la altura de línea del texto en 100vh, lo que hace que el texto se extienda verticalmente para ocupar toda la altura del viewport. Además, se debe definir un contenedor padre con una altura del 100% del viewport (100vh). Ver ejemplo a continuación.
4.2. vh y vw: Centrar cualquier elemento según el ancho del viewport (con propiedad transform)
El siguiente código lo puedes utilizar para centrar cualquier elemento vertical y horizontalmente en relación con el tamaño del viewport utilizando las unidades vh y vw, junto con la propiedad propiedad transform de CSS. Este método es útil para centrar imágenes o contenedores dentro de un div de manera rápida y sencilla.
4.3. Diseño de footer fijo en la parte inferior del viewport solo si hay poco contenido
El siguiente ejemplo muestra cómo diseñar un footer que acompaña al contenido principal, adaptándose dinámicamente a su longitud. Utilizando flexbox y unidades vh, el footer se posiciona al final del viewport si el contenido es corto. Sin embargo, si el contenido en el área principal es más extenso, el footer se desplaza hacia abajo, siguiendo el flujo del contenido.
Esperamos que encuentres útil este artículo y que te ayude a comprender mejor cómo utilizar las unidades vh y vw en CSS. Si quieres recibir más contenido como este, ¡no dudes en suscribirte a nuestra lista de correo para recibir actualizaciones periódicas directamente en tu bandeja de entrada!