¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Descubre las unidades de CSS Viewport

Las unidades del Viewport (o Ventana Gráfica en la lengua de Cervantes) llevan bastante tiempo a nuestro alrededor pero no se podían usar mucho. A día de hoy ya tienen soporte para ellas todos los navegadores y ofrecen unas ventajas bastante útiles en ciertas situaciones, especialmente cuando intentamos crear diseños que se adapten a todas las pantallas (responsive).

Breve introducción a las unidades de ventana gráfica

La ventana gráfica es el área del navegador en la que se muestra el contenido o, dicho de otra manera, es la parte del navegador que queda sin sus barras de herramientas ni botones. 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 puedes usarlas donde quieras, ya sea en tamaños de fuentes o bien en tamaños de divs, ¡lo que quieras! Lo ideal es que se recalculan al redimensionar (o rotar) la pantalla.

Veamos algunos usos:

1. Elemento al 100% del alto de la página

Estoy seguro de que alguna vez te has visto en la tesitura de llevar esta tarea a cabo. La lógica nos dice que podríamos probar algo así:

.elemento {
  height: 100%;
}

No obstante 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 no obstante es rápido y sencillo (y para toda la familia).

.elemento {
  height: 100vh;
}

2. Fuentes relativas

En varios proyectos recientes he tenido que usar este pequeño truco. Imagina que tienes una aplicación móvil que, inicialmente diseñaste para un tamaño estándar. De repente entran los nuevos móviles con tamaño casi de tablet y queda demasiado espacio. ¡vh al rescate!

p {  
  font-size: 3.17vh;
}

De esta manera, no importa el dispositivo en el que estemos, la fuente quedará bien, de acuerdo al tamaño de la pantalla.

¡Vuestra imaginación es un poco el límite!

No obstante, cabe destacar que estas medidas funcionan muy bien con la función calc de CSS. Pongamos que tenemos un header de 150px pero queremos que nuestro contenido tenga el 100% de la ventana visible, menos ese header:

.contenido {
  height: calc(100vh - 150px);
}

¡Listo! Ten en cuenta que si lo vas a hacer en Less tendrías que poner algo así:

.contenido {
  height: calc(~"100vh - 150px");
}

Esto es porque Less intenta hacer la resta automáticamente y causa problemas al ser compilado.

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!