Uso de las unidades Css vw y vh en el diseño de sitios web modernos

En español el artículo original de Dudley Storey "Using vw and vh Measurements In Modern Site Design" publicado en su blog demosthenes.info

Uso de las unidades Css vw y vh en el diseño de sitios web modernos

✎ 8
COLABORACIÓN AUTOR INVITADO

Traslación al español del artículo original de Dudley Storey "Using vw and vh Measurements In Modern Site Design" sobre las unidades Css relativas al tamaño de la ventana del navegador. Explicación de las mismas y sus ventajas y diferencias frente a otros valores de Css y su uso en el diseño de sitios web modernos.

Uso de las unidades Css vw y vh en el diseño de sitios web modernos
Crédito de la imagen

Algunas propiedades y valores Css no se ganan la atención de los desarrolladores, bien porque la especificación que las desarrolla no es "sexy" o porque los casos de uso no resultan obvios.

Un buen ejemplo de esto son los valores vw, vh, vmax, vmin relativos al tamaño de la ventana. Valores que forman parte de la especificación CSS3 Values & Units Module desde hace un tiempo ya.

Como vamos aver, estos nuevos valores son perfectos para la creación de páginas RWD, pero antes, unas ideas generales sobre ellos.

¿Por qué necesitamos otra forma de medir cosas en Css?

Los principios tras vw, vh son sencillos: representan porcentajes sobre la anchura y altura del 'viewport' respectívamente.

1vw = 1/100 de la anchura de la ventana. Es el 1% de ella.
15vh = 15/100 de la altura de la ventana. Es el 15% de ella.

A primera vista, vw y vh parecen ser un tanto redundantes, ya que tenemos un sistema de medición que se refiere a la anchura de ventana en forma de porcentaje. Por ejemplo: div { width: 50%; }.

Aplicado a casi cualquier elemento, una anchura en porcentaje correlaciona el tamaño de un elemento con el tamaño de su contenedor, que puede incluir la ventana del navegador: en efecto, el concepto y la práctica de imágenes adaptables se basa enteramente en este hecho. Pero un poco de reflexión muestra que las medidas porcentuales tienen algunas limitaciones importantes:

  1. La anchura de 'body' no incluye el 'margin'.
  2. La altura de la ventana siempre ha tenido algunas dificultades, como que la altura del 'body' depende de la cantidad de contenido en la página y no de las dimensiones de la ventana del navegador (*N.T.: ver art en css-tricks)
  3. Más importante aún, la anchura en porcentaje de 'body' no puede ser aplicada al tamaño del texto. font-size: 15% se aplica sobre el tamaño relativo del texto de su ancestro, no sobre las dimensiones de la ventana

Así que el equivalente en unidades vw para la declaración anterior (width: 50%) haciendo caso omiso de cualquier margen que pueden haber influido en el div sería: div { width: 50vw; }.

Y para escalar un título en relación al tamaño de la ventana del navegador puedes usar: h1 { font-size: 5vw; }.

vmin y vmax

vmax y vminvmin es una unidad que relaciona de forma directa con la anchura o altura de la ventana del navegador de la misma manera que lo hace vw y vh. La diferencia está en que vmin selecciona como referente el eje (x ó y) que sea el más pequeño de los dos y vmax al mayor.

Así, si el navegador es abierto con una relación de aspecto como en la imagen de la derecha, 10vmin es equivalente a 1/10 de la anchura de la ventana mientras que 25vmax será un cuarto de la altura.

Soporte por navegadores
IE Firefox Chrome Safari
IE 10+ Firefox 19+ Chrome 20+ Safari 6+

Es importante resaltar que el soporte de Safari no incluye la adaptación dinámica a fecha de este artículo: al redimensionar la ventana del navegador no cambia los tamaños de los elementos declarados en vw, vh, vmin y vmax. Sin embargo los elementos sí son escalados proporcionalmente al tamaño de la ventana en la carga inicial de la página.

Chrome y Safari no soportan vmax y Opera ninguna de estas unidades, aunque cabría esperar que esto cambie al pasar al motor blink.

Se puede aumentar el soporte en aquellos navegadores que no lo hacen con el uso de 'polyfills' de jvascript como los creados por Lea Verou y Sebastian Ferreyra.

Conclusión

Las unidades vw y vh ofrecen unas características únicas en aplicaciones para desarrollos móviles y són únicas ofreciendo una forma para escalar el texto en función del tamaño del viewport.

Créditos y autoría

img representativa de demosthenes.info

La totalidad de este artículo es obra de Dudley Storey publicado originalmente en su blog demosthenes.info.
Lo publico aquí al amparo y según las condiciones del propio autor:
The content of this blog is free to use, translate and republish under a Creative Commons license that permits non-commercial sharing with attribution.

En este enlace tienes todas las formas de contacto con el autor original así como información adicional.

No obstante creí apropiado ponerlo en conocimiento del autor:

Comentarios: 8

  1. Interesante, la verdad. Lástima la limitada implantación

    ResponderEliminar
  2. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Comentario por Agustina Gonza:

      Espero que pronto se pueda utilizar en Chrome, ya que actualmente es uno de los navegadores más usados por los navegantes.
      Por .... (enlace eliminado).
      Besos

      ---- Fin comentario original ----

      Agustina, Chrome da soporte a estas unidades desde hace unas cuantas versiones.

      Por cierto, los enlaces son bienvenidos y muchas veces necesarios... cuando vienen a cuento del tema o comentario.
      En tu caso creo que es mero spam. Y esos (spam) ya no gustan tanto.

      Un saludo

      Eliminar
  3. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hey Tulito Arias
      Como diría el recordado Fernan Gómez:
      ¡A la mierda! ¡Váyanse a la mierda todos los spammers!

      Pero con cariño, ¡he?

      Eliminar
  4. Impresionante el efecto de vw aplicado al texto! te has salido traduciendo este artículo!
    No soy un spammer!

    ResponderEliminar
  5. Gracias por el articulo, habia oido hablar de esas medidas pero no sabia como funcionaban. Muy buen articulo gracias por traducirlo! :)

    ResponderEliminar
  6. Excelente información, acabo de utilizarlo y su funcionamiento, (al menos en Opera, Chrome y Firefox), fue genial.

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap