Viewport units CSS. Qué es y cómo utilizar las unidades vh, vw, vmin y vmax - Blog Yunbit Software

Las “unidades de longitud porcentuales de ventana de visualización” (viewport-percentage lengths) o más comúnmente llamadas viewport units son unidades css relativas a la ventana gráfica del navegador o visualizador.

El marco de referencia en anchura/altura de nuestro navegador donde se visualiza la web se establece desde el W3C como “Bloque inicial contenedor“, y su medida nos permite definir las dimensiones porcentuales de anchura/altura de todos los elementos que contiene.

Este bloque inicial o ventana gráfica puede considerarse como la capa padre de toda nuestra web, y las unidades “vh” y “vw” son las unidades en altura y anchura que hacen referencia a esta ventana:

Sus valores se expresan en porcentaje (de 0 a 100). Ejemplos:

• width:100vw; (anchura del 100% de la anchura de la ventana gráfica)
• height:50vh; (altura del 50% de la altura de la ventana gráfica)
• line-height:3vh; (altura de línea del 3% de altura de la ventana gráfica)

La diferencia entre las unidades porcentuales expresadas con “%” (width:100%) y las viewport-units (width:100vw) es que las primeras heredan los valores de su elemento padre, y las segundas siempre heredan los valores del bloque inicial o ventana gráfica.

Utilizando viewport units. Ejemplos prácticos.

Estas unidades son muy prácticas para lograr, entre muchas otras posibilidades, lo que hasta ahora ha sido siempre complicado de conseguir. Establecer una medida del 100% de altura a nuestras capas. Para lograrlo, hasta ahora la capa padre o contenedora debía tener “height:100%“, cosa que en ocasiones no era posible y utilizábamos javascript u otras técnicas css más elaboradas para solventarlo. Ahora es tan sencillo como establecer unas dimensiones de 100vh a nuestra capa para que ésta adopte el 100% de altura de la ventana gráfica. Veamos un ejemplo:

HTML EJEMPLO 1:

<div id="contenedor">
    <div id="capa1" class="capa"></div>
    <div id="capa2" class="capa"></div>
</div>

CSS EJEMPLO 1:

*{
    margin:0px;
    padding:0px;
}
.capa{
    width:100%;
    height:100vh;
    line-height:100vh;
    color:#ffffff;
    text-align:center;
    font-size:3em;
}

EJEMPLO 1:

Como podemos ver, hemos aplicado tanto una altura como una altura de línea de 100vh a class=”capa”, obteniendo una medida exacta del 100% de la altura de la ventana gráfica (en este caso el 100% de la altura del iframe donde visualizamos el ejemplo) para cada una de las capas y ajustando el texto al centro vertical de éstas, sin necesidad de establecer ningún css para su capa padre, id=”contenedor”.

Uno de los problemas más comunes al utilizar viewport units es que las medidas de la ventana gráfica incluyen el tamaño del scroll, por lo que en ocasiones nuestra capa se desborda al medir más que la capa padre si ésta tiene el scroll vertical visible. Por ello en el anterior ejemplo hemos optado por establecer “width:100%” en vez de “width:100vw“. Vemos una prueba de este caso en el siguiente ejemplo:

CSS EJEMPLO 2:

.capa{
    width:100vw;
    height:100vh;
    line-height:100vh;
    color:#ffffff;
    text-align:center;
    font-size:3em;
}

EJEMPLO 2:

Aunque podemos llegar a ocultar la barra de scroll horizontal inferior, no es una buena opción utilizar “width:100vw” en desarrollos en los que puedan contener una barra de scroll vertical, ya que las capas seguirán midiendo el 100% de anchura de la ventana gráfica, y dicho scroll vertical nos ocultará parte de las capas.

Otro de los usos para los que viewport units nos puede servir es para adecuar el tamaño del texto. Conseguir un ajuste óptimo del tamaño del texto para todos los dispositivos requiere saber combinar valores “em/rem” de tamaño de fuente entre padres/hijos, y aun así necesitamos establecer diferentes tamaños en varias media queries. Con viewport units podemos establecer un valor único para todas las resoluciones de pantalla y que los textos se adapten automáticamente. Vemos una prueba rápida en el siguiente ejemplo (en el que también hemos modificado la altura y la altura de línea de las capas para que ocupen la mitad de la ventana gráfica):

CSS EJEMPLO 3:

.capa{
    width:100vw;
    height:50vh;
    line-height:50vh;
    color:#ffffff;
    text-align:center;
    font-size:6vw;
}

EJEMPLO 3:

Valores mínimos y máximos de viewport units.

En el caso de las unidades vmin y vmax, obtenemos el valor porcentual mínimo o máximo de la ventana gráfica, ya sea en altura o anchura. Es decir, que dependiendo de la orientación del dispositivo, obtenemos el valor en porcentaje de altura o de anchura, el que menos o más mida en ese momento. Si nos imaginamos un smartphone en posición vertical (vista portrait), vmin sería la medida porcentual en anchura de la ventana gráfica, mientras que vmax sería la medida porcentual en altura de la ventana gráfica. Si por el contrario giramos el dispositivo y lo colocamos en posición horizontal (vista landscape), vmin sería la medida porcentual en altura, mientras que vmax sería la medida porcentual en anchura.

Los usos de vmin y vmax son muy adecuados cuando trabajamos con elementos con una relación de aspecto fija, o como sustituto de media queries que utilizamos para diferentes orientaciones de pantalla. El ejemplo que hemos visto anteriormente en el que aplicábamos un tamaño de texto de 6vw (font-size:6vw) funciona bien, pero en resoluciones móviles verticales hace que el texto tal vez se vea demasiado pequeño. Podemos modificarlo haciendo que el texto se adapte porcentualmente al menor tamaño de ventana gráfica en cualquier tipo de resolución:

CSS EJEMPLO 4:

.capa{
    width:100vw;
    height:50vh;
    line-height:50vh;
    color:#ffffff;
    text-align:center;
    font-size:16vmin;
}

EJEMPLO 4:

Compatibilidad de viewport units.

Como podemos ver en caniuse, aunque las unidades viewport units son soportadas por un amplio abanico de navegadores, hay que tener en cuenta ciertos bugs e incompatibilidades entre las que se encuentran:

• Problemas de impresión en Chrome al utilizar estas unidades.
• Varias versiones de Internet Explorer, Edge y Safari no tienen soporte completo para todas las unidades.
• Opera mini no soporta viewport units.