soy Kseso y esto EsCSS

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

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

·Por Kseso ✎ 5

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”}

avatar del Editor del blog
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso