Estás nuevas unidades añadidas el 23 de abril de 2012 por los editores de CSS3, son las grandes desconocidas por muchos diseñadores web, vamos a ver que ventajas nos dan.

Vw, vh y vmin se usan como cualquier otra unidad, añadiéndolas tras el valor numérico de la propiedad a la que queremos que afecte. Según la W3C estas unidades son relativas al tamaño del bloque de contención inicial, de tal modo que cuando la altura o anchura de la ventana cambia, se escalan en consecuencia.

¿Qué son vw, vh y vmin?

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

¿Qué navegadores lo soportan?

  • Chrome: desde la versión 22.
  • Firefox: desde la versión 31.
  • Internet Explorer: desde la versión 10.
  • Safari: desde la versión 6
  • Blackberry Browser: desde la versión 10.

Veamos a continuación un ejemplo de su uso para crear un contenedor 100% responsive:

.contenedor {

   position: relative;

   height: 100vh;

   max-height: 100vh;

   width: auto;

   min-width: 100vw;

   margin: 0 auto;

   overflow: hidden;

}

Leave a Reply

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies