Demo CSS3: Un diseño con medidas basadas en viewport

A estas alturas creo que ya todos debemos conocer la diferencia entre unidades de medida relativas y absolutas en CSS a la hora de especificar un tamaño de fuente para una página web: las unidades absolutas (por ejemplo, los píxeles, aunque también existen puntos, centímetros, pulgadas…normalmente usados solo en hojas de estilo para impresión) definen dimensiones con precisión y exactitud, las unidades relativas permiten especificar tamaños relativos a otros tamaños. Esto quiere decir, por ejemplo, que un tamaño de 2em sobre una fuente base de 16px equivale a 32px, mientras que los mismos 2em sobre sobre una fuente base de 14px es igual a 28px. Hasta aquí todo claro.

yosemite

Pero, ¿qué pasaría si quisieramos definir una medida no respecto al tamaño de una fuente sino a las dimensiones de la ventana? Ésta es precisamente una de las muchas fantásticas y aun semi-desconocidas funcionalidades de la especificación de CSS3: Las viewport relative lengths, o distancias relativas a la región visible del navegador.

La idea es que estas medidas son relativas al tamaño de la región visible del navegador, lo que nos permiten crear diseños que antes solo eran posibles de realizar con Javascript, haciendo uso las propiedades window.height y window.width.

En la especificación están definidas las siguientes unidades:

vw: 1% de la anchura de la ventana
vh: 1% de la altura de la ventana
vmin: 1% de la menor dimensión de la ventana (altura o anchura)
vmax: 1% de la mayor dimensión de la ventana (altura o anchura)

Como es habitual, un ejemplo habla más que mil palabras, así que he creado una pequeña demostración de como funcionan estas propiedades en un ejemplo real. Probad a redimensionar la pantalla para ver como el tamaño de la portada del sitio se adapta a las dimensiones de la ventana.

Demo: un diseño con medidas basadas en viewport

El soporte de estas unidades es relativamente bueno [ver soporte],excepto en navegadores móviles, por lo que no debería ser un problema si queremos usarlo para darle un poco más de vida a nuestros diseños.

Más información:

Lee ahora: Archetype: Un nuevo tema de WordPress »