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