Font-size en función del tamaño de la ventana: "viewport-percentage"

El documento de trabajo de los editores de Css3 "CSS Values and Units Module Level 3" del 23 de Abril de 2012 (status: Editor's Draft) añade algunas unidades nuevas para poder dar tamaño a los textos en función de las medidas de su caja contenedora inicial o del tamaño de la ventana.
Las unidades nuevas son:
   vw ‖ vh ‖ vmin   

Cómo usar y qué son vw | vh | vmin

Como cualquier otra unidad de los valores de css. Añadiendolas tras el valor numérico en la propiedad. El significado de cada uno de ellos es el siguiente según lo define el consorcio

Las longitudes "viewport-percentage" son relativas al tamaño del bloque de contención inicial. Cuando la altura o anchura de la ventana cambia, se escalan en consecuencia.
A tener en cuenta que "Page Media" define cómo el bloque de contención inicial se transforma a través de distintos anchos de página. Esto también afecta a estas unidades.
Qué son vw | vh | vmin

vw: Igual a 1% de la anchura del bloque de contención inicial.
vh: Igual a 1% de la altura del bloque de contención inicial.
vmin: Igual a la más pequeña de "vw" o "vh".

Cómo se usar vw | vh | vmin

Como cualquier otra unidad:

h1 {font-size: 8vw} h2 {font-size: 3.0vh;} p {font-size: 2vmin;}

Traduciendo: h1 tendrá un tamaño de fuente del 8% de la anchura de la ventana. Si la ventana son 1000px, vw=80px. Si se reescala a 600px, vw=48px.

Soporte de los navegadores

Actualizado: Enero 2013
  • IE10 : soporte completo
  • IE9 : soportado, pero en lugar de vmin usa vm
  • Chrome 22+ : soporte completo
  • Safari 6 / iOS Safari 6 : soporte completo
  • Firefox : No. Aunque posíblemente lo incluya en la ver.19 (Febrero 2013)
  • Blackberry Browser 10 : soporte completo

Si quieres estar al tanto del soporte de los navegadores a las Viewport units: vw, vh, vmin a medida que pase el tiempo puedes verlo aquí.

Adenda

Mientras estaba preparando este artículo, Css-Tricks publica un artículo sobre el particular.
Su autor, Chris Coyier, enlaza a un ejemplo, para quienes tengan una versión de las indicadas. Y para quienes no puedan verlo en vivo, este vídeo:

Un usuario de esta página, William Malo, deja en los comentarios una realización sobre el particular basada en js:

onresize=onload=function() {document.body.style.fontSize=window.innerWidth+”px”}

Publicado el por y Archivado en

Y para terminar, como agradecimiento a tu visita, déjame sugerirte que te suscribas al blog. Sólo recibirás los nuevos artículos.

También puedes ver alguno de estos artículos que tienen relación con el que acabas de leer:

5 comentarios :

  1. Lena1/5/12

    Interesantísimo! Te sigo en Twitter y tu blog es una forma estupenda de estar al día y preparada para lo que viene!! :)

    ResponderEliminar
    Respuestas
    1. Gracias Lena.

      Me alegra saber que puede serte de utilidad.

      Un saludo

      Eliminar
  2. Interesantisimo, amigo. Actualmente estoy realizando un estudio autodidacta personal sobre diseño web responsive y seguía el tema de la tipografía liquida o elastica, en unidades ems, rems o porcentajes, que van mas que nada en relación con el tamaño del texto, pero esto me parece muy funcional. A la fecha de este comentario, he comparado la pagina de ejemplo en Firefox 17, Chrome 23, IE9 y noto que la representación del texto es diferente en cada uno, tanto en la longitud real de la ventana, como al cambiar la resolución de la misma, siendo mayormente fiel en Chrome. Gracias por el aporte.

    ResponderEliminar
  3. Firefox 19.0 ya lo soporta :)

    ResponderEliminar
  4. Te ganaste un seguidor.. desde ayer no paro de revisar tu blog.. felicitaciones.. y gracias por compartir.

    ResponderEliminar