Uso de unidades viewport en CSS

Las unidades Viewport (o Ventana Gráfica) llevan bastante tiempo siendo soportadas en CSS pero no se habían podido usar debido a la falta de soporte en algunos navegadores. Hoy en día todos los navegadores modernos soportan estas medidas que ofrecen ventajas especiales para diseños adaptables (responsive).

Breve introducción a las unidades Viewport

El Viewport es el área del navegador en la que se muestra el contenido o la parte del navegador que queda sin sus barras de herramientas ni botones, es decir, la parte activa del navegador en donde se muestra el contenido. Las unidades disponibles son vw, vh, vmin y vmax. Todas representan un porcentaje de la ventana gráfica y lo más importante es que escalan con la ventana.

Para simplificar los ejemplos, digamos que tenemos una ventana gráfica de 1920px (de ancho) por 1040px (de alto):

• vw: Representa un 1% del ancho de la ventana gráfica. En nuestro caso 50vw = 960px.
• vh: Representa un 1% del alto de la ventana gráfica. En nuestro caso 50vh = 520px.
• vmin: Representa un 1% del valor menor entre vw y vh, en nuestro caso será de 1040px ya que estamos en modo apaisado por lo que 50vmin = 520px.
• vmax: Representa un 1% del valor mayor entre vw y vh, en nuestro caso será de 1920px por lo que 50vmax = 960px.

Estas unidades se pueden usar en cualquier elemento que tenga medidas, como tipografías, divs, etc. Una de las grandes ventajas es que se recalculan al redimensionar o rotar la pantalla.

Veamos un ejemplo simple:

En muchas ocasiones hemos necesitado tener un elemento del alto de la pantalla y la lógica nos dicta esto:

Sin embargo, esto no funcionará a menos que añadamos la misma regla a todos los ancestros de este elemento, incluyendo body y html lo cual a veces no es deseable. Con vh es rápido y sencillo.

En este caso, no es necesario aplicar la medida a los ancestros del elemento ya que se calcula el alto con respecto al alto de la ventana gráfica del navegador y no con el alto del documento html o del body.