Simplifica tus hojas de estilo con las unidades mágicas basadas en el viewport

Las unidades basadas en el viewport existen desde hace muchos años, pero no por ello estamos acostumbrados a ellas. Ahora están soportadas por la mayoría de los principales navegadores y ofrecen una función única que puede ser muy útil en ciertas situaciones, especialmente las que implican un diseño responsive.

Conociendo a las unidades basadas en el viewport

El viewport es el area de tu navegador donde se muestra el contenido actual. En otras palabras, es tu navegador sin barra de herramientas ni botones. Dichas unidades son vw, vh, vmin y vmax. Todas representan un porcentaje de la dimensión del viewport del navegador y escalan de acuerdo al tamaño de la ventana.

Digamos que tenemos un viewport de 1000px (ancho) por 800px (alto):

• vw: Representa el 1% del ancho del viewport. En nuestro caso 50vw = 500px
• vh: Porcentaje del alto de la ventana. 50Vh = 400px
• vmin: Porcentaje del minímo de los dos. En nuestro ejemplo 50vmin = 400px ya que estamos en modo horizontal
• vmax: Porcentaje de la dimensión más grande. 50Vmax = 500px

Puedes utilizar estas unidades donde habitualmente definas medidas en píxeles, como en un width, height, margin, font-size y demás. Serán recalculadas por el navegador cuando se cambie de tamaño la ventana o si se rota el dispositivo.

Ocupar todo el alto de la página

Todo desarrollador frontend se topado con este problema. Lo primero que intentas hacer es algo parecido a esto:

#elem{
    height: 100%;
}

Sin embargo, esto no funcionará a menos que definamos una altura del 100% para el body y el html, cosa que no es muy elegante y puede romper el resto de tu diseño. Con vh es bastante sencillo. Sólo tienes que definir la altura a 100vh y siempre será tan alto como tu ventana.

#elem{
    height: 100vh;
}

Esto es perfecto para aquellas imágenes a pantalla completa que tanto se llevan hoy en día.

El tamaño de los elementos hijos es relativo al navegador, no al padre

En ciertas situaciones, queremos que el tamaño de un elemento hijo sea relativo a la ventana, no al tamaño de su padre. Al igual que en el ejemplo anterior, esto no funcionará:

#parent{
    width: 400px;
}
#child{ 
    /* Esto es igual al 100% del ancho del padre, no al de toda la pagina. */ 
    width: 100%; 
}

Si en vez de eso, utilizamos vh nuestro elemento hijo hará overflow ocupando todo el ancho de pantalla y su padre mantendrá el mismo tamaño:

#parent{
    width: 400px;
}
#child{
    /* Esto es igual al 100% de la pagina, sin importar el tamaño del padre. */
    width: 100vw;
}

Tamaño de fuente responsive

Las unidades basadas en el viewport pueden utilizarse también en los textos. En este ejemplo definimos el tamaño de la fuente con vw creando un elemento responsive en solo una línea de CSS. ¡Hasta nunca, Fittext!

h2.responsive-text{
    font-size: 6vw;
}
h4.responsive-text{
    font-size: 3vw;
}

Centrado vertical responsive

Definiendo el ancho, alto y márgenes de un elemento en unidades basadas en el viewport podemos centrarlo sin necesidad de utilizar otras artimañas.

Aquí, pintamos un rectángulo que tiene un alto de 60vh y unos márgenes en el alto y en el bajo de 20vh, que lo define a 100vh (60 + 2*20) haciendo que esté siempre centrado, incluso cuando se redimensiona la ventana.

#rectangle{
    width: 60vw;
    height: 60vh;
    margin: 20vh auto;
}

Ancho igual en todas las columnas

También puedes utilizar las unidades basadas en el viewport para hacer grids responsives. Se comportan de manera similar a los basados en porcentajes, pero siempre estarán dimensionados en relación al viewport. Así, por ejemplo, puedes colocarlos en un elemento padre más ancho que la ventana, y aún así el grid mantendrá su anchura. Esto puede ser útila la hora de desarrollar sliders a pantalla completa.

Esta técnica requiere que los elementos tengan float:left; para alinear los elementos que están cerca el uno con el otro:

.column-2{
    float: left;
    width: 50vw;
}
.column-4{
    float: left;
    width: 25vw;
}
.column-8{
    float: left;
    width: 12.5vw;
}

Las unidades basadas en el viewport tienen múltiples usos y vale la pena experimentar con ellas. Son fáciles de entender y pueden ser extremadamente útiles en ciertos escenarios, donde las soluciones técnicas de CSS son más difíciles o imposibles de aplicar.

Fuente: tutorialzine.com