Las unidades viewport pueden ser usadas en CSS, así como utilizamos px, % y otros. Son de mucha utilidad en proyectos que requieran ser responsive. En esta ocasión, vamos a hacer una breve introducción al uso de unidades VW y VH, junto con unos ejemplos.
¿Qué son las unidades de viewport?
Antes de hablar sobre las unidades, vamos a definir al viewport. El viewport es la pantalla del navegador (o browser), no la pantalla de la computadora. Es muy útil saber este concepto, porque muchas características del diseño responsive de las páginas están basadas en el viewport.
Entonces, las unidades de viewport son unidades relativas a las dimensiones del viewport. Existen cuatro unidades específicas, que representan un porcentaje de la dimensión del viewport.
- Viewport Width (vw): 1vw equivale a 1% del ancho del viewport.
- Viewport Height (vh): 1vh equivale a 1% de la altura del viewport.
- Viewport Minimum (vmin): 1vmin equivale a 1% de la dimensión más pequeña del viewport.
- Viewport Maximum (vmax): 1vmax equivale a 1% de la dimensión más grande del viewport.
Podemos utilizar estas unidades para varios aspectos que requieran tamaños o dimensiones, como width, height, margin, padding, border, font-size, line-height, entre otros.
Ejemplos: ¿Cómo utilizar las unidades vw y vh?
En el siguiente ejemplo vamos a ver cómo podemos utilizar las unidades vw y vh para definir el ancho y altura de diferentes contenedores. Además veremos la diferencia entre usar porcentajes o unidades de viewport.
See the Pen
Unidades de Viewport: vw, vh, vmin, vmax by regardis (@regardis)
on CodePen.
Al usar las unidades viewport, estas dimensiones son independientes del contenedor padre y solo son relativas a las dimensiones del browser. En cambio, al usar porcentajes, estas dimensiones sí son relativas al contenedor padre.
Uno de los usos que más me gusta es para hacer que toda la pantalla esté con una imagen de fondo. Con las unidades de viewport podemos configurar el ancho y la altura con 100vw y 100vh, respectivamente.
See the Pen
Unidades de Viewport para imágenes de fondo by regardis (@regardis)
on CodePen.
Consideraciones
- Si estás utilizando las unidades viewport para hacer un desarrollo web, te recomiendo siempre revisar en qué navegadores son compatibles.
- Hay algunas observaciones al utilizar estas unidades en dispositivos móvil, dado que en algunos dispositivos se toma en cuenta el ancho de la barra scroll.
Si tienen alguna duda, pueden dejarla en los comentarios.
¿Este contenido te fue útil? Invítame un cafecito y ayúdame seguir creando más contenido. ¡Gracias! ♥︎
Invítame un cafecito
