En el desarrollo web, el diseño responsive es uno de los aspectos más críticos y con vw y vh se puede crear una experiencia visualmente atractiva y fácil de usar. Con la creciente variedad de dispositivos -teléfonos inteligentes, tabletas, ordenadores de sobremesa e incluso smartwatches-, los diseñadores deben asegurarse de que sus sitios web se adapten con elegancia a diferentes tamaños y resoluciones de pantalla.

Por esta razón, los desarrolladores web modernos suelen utilizar «vw» (viewport width) y «vh» (viewport height) en lugar de los más tradicionales «px» (píxeles) para dimensionar los elementos de una página web.

¿Qué son «vw» y «vh»?

«vw» (Anchura de la ventana gráfica): 1 «vw» equivale al 1% de la anchura de la ventana gráfica del navegador. Si la ventana tiene 1000 píxeles de ancho, 1 «vw» equivaldría a 10 píxeles.
«vh» (altura de la ventana gráfica): 1 «vh» equivale al 1% de la altura de la ventana gráfica. Si su ventana tiene 800 píxeles de altura, 1 «vh» equivaldría a 8 píxeles.

Estas unidades son relativas a la ventana gráfica, que es el área visible de una página web. A diferencia de «px», que es una unidad absoluta que permanece estática independientemente del tamaño de la pantalla, «vw» y «vh» se ajustan dinámicamente a medida que cambia la ventana gráfica.

Ventajas de utilizar «vw» y «vh» frente a «px»

1. Diseño adaptable:

Cuando se utilizan píxeles (`px`) para el dimensionamiento, el diseño queda fijo. Esto significa que, a medida que cambia el tamaño de la pantalla (de escritorio a móvil, por ejemplo), los elementos pueden aparecer demasiado grandes, demasiado pequeños o desalineados. En cambio, «vw» y «vh» permiten que el diseño se adapte automáticamente a los distintos tamaños de pantalla, manteniendo elementos proporcionados que se ven bien en cualquier dispositivo.

Por ejemplo:
«`css
/* Con px */
.header {
height: 100px;
width: 600px;
}

/* Con vw y vh */
.header {
height: 10vh;
width: 60vw;
}
««
Con «vw» y «vh», las dimensiones de la cabecera se ajustarán proporcionalmente, garantizando que el diseño funcione tanto en un monitor de sobremesa ancho como en una pantalla de móvil pequeña.

2. Dimensionamiento basado en el puerto de visualización:

Como las unidades «vw» y «vh» se basan en la ventana gráfica del navegador, los desarrolladores pueden crear diseños que se adapten al espacio disponible en la pantalla. Esto es especialmente útil para componentes a pantalla completa, como banners, modales y deslizadores, en los que es crucial mantener las proporciones correctas.

Por ejemplo, un fondo de pantalla completa puede conseguirse fácilmente utilizando «vh»:
«`css
.full-screen-banner {
height: 100vh;
width: 100vw;
}
««
Esto garantiza que el banner ocupe siempre toda la pantalla, independientemente del tamaño o la resolución del dispositivo.

3. Tipografía fluida:

La tipografía fluida, en la que el tamaño de las fuentes se adapta dinámicamente al tamaño de la ventana gráfica, es una tendencia creciente en el diseño web. El uso de `vw` para los tamaños de fuente garantiza que el texto se ajuste proporcionalmente a los distintos dispositivos, mejorando la legibilidad y manteniendo una estética de diseño coherente.

Por ejemplo:
«`css
h1 {
font-size: 5vw;
}
«`
En este caso, el texto del encabezado ocupará el 5% del ancho de la ventana gráfica, lo que permite fuentes más grandes en pantallas más grandes y fuentes más pequeñas en dispositivos móviles sin necesidad de consultas de medios.

4. No hay sobrecarga de consulta de medios:

Un problema habitual del uso de `px` es que los desarrolladores a menudo tienen que escribir numerosas consultas de medios para manejar diferentes tamaños de pantalla. Esto puede sobrecargar el archivo CSS y dificultar su mantenimiento. El uso de «vw» y «vh» reduce la necesidad de realizar un número excesivo de consultas de medios, ya que los elementos de diseño cambian de tamaño de forma natural en función de la ventana gráfica.

5. Mejor accesibilidad:

El uso de «vw» y «vh» también puede mejorar la accesibilidad. Dado que estas unidades se ajustan en función del tamaño de la pantalla, pueden ayudar a garantizar que elementos como los botones, las imágenes y el texto mantengan el tamaño adecuado para los usuarios con deficiencias visuales que puedan depender del zoom.

6. Coherencia entre dispositivos:

Al utilizar «px», los diseños pueden parecer perfectos en un dispositivo pero completamente diferentes en otro. Esta incoherencia puede resultar frustrante, sobre todo a la hora de garantizar una experiencia de usuario fluida. Con «vw» y «vh», los tamaños relativos se mantienen constantes, lo que proporciona una experiencia más unificada en múltiples dispositivos.

¿Cuándo se debe seguir utilizando «px»?

Aunque «vw» y «vh» ofrecen muchas ventajas, hay ocasiones en las que «px» sigue siendo la mejor opción:
Elementos pixelados: Los píxeles pueden ser útiles si necesitas elementos que mantengan un tamaño fijo independientemente del tamaño de la pantalla (por ejemplo, iconos o pequeños componentes de IU).
Bordes y detalles de diseño precisos: Los píxeles pueden ofrecer un mayor control de los bordes finos, los márgenes o el relleno, especialmente cuando importan las pequeñas diferencias de tamaño.

Conclusión

En el desarrollo web moderno, la flexibilidad y la adaptabilidad son fundamentales para ofrecer excelentes experiencias de usuario en distintos dispositivos. Si optas por las unidades «vw» y «vh» en lugar de «px», podrás crear diseños más adaptables, mantener la coherencia del diseño y realizar menos ajustes mediante consultas de medios. Aunque «px» sigue teniendo su lugar para algunos elementos de diseño específicos, la adopción de unidades relativas dará como resultado diseños más limpios, escalables y fáciles de usar.