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

Por 5 Comentarios

Archivado en —

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 —

Cartas al Editor [ 5 ]

El autor de artículo y el blog estaremos encantados de leer tu opinión, críticas, corrrecciones, matizaciones, ampliaciones o cualquier comentario que su lectura te sugiera. Y lo agradecemos... siempre que esté hecho con educación, buenas maneras y respeto.
Para publicar código envuélvelo con la etiqueta [code] [/code].
Para insertar Pens de @codepen mira esta guía.

  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