¿Qué son las medidas vh y vw?
Las medidas vh y vw son medidas relativas de acuerdo al viewport. Vh hace referencia a la centésima parte de la altura del viewport y vw a la centésima parte del ancho del viewport.
1vh = 1% de la altura del viewport
100vh = altura del viewport
1vw = 1% del ancho del viewport
100vw = ancho del viewport
¿Para qué nos sirven?
Estas medidas tienen múltiples usos, por ejemplo cuando queremos tener una imagen de fondo que ocupe todo el ancho y alto de nuestro pantalla. También cuando queremos que nuestro texto varíe de acuerdo a las medidas del dispositivo. Veamos un ejemplo para ver la utilidad y practicidad de estas medidas.
Tenemos un texto dentro de un div con una imagen de fondo y luego un parrafo con texto lorem ipsum.
¿Cómo haríamos para que la imagen de fondo ocupe todo el alto de la pantalla y a continuación cuando hagamos scroll se vea el párrafo? Lo primero que se les puede ocurrir es dar height: 100% al div, pero esto no funciona porque el alto del padre depende del contenido que este conteniendo. En este caso solo contiene dos palabras y su alto sera igual al line-height de el texto, es así que eso no nos sirve.
Otra opción sería position:absolute y poner top, left, right y bottom con valor 0, pero el párrafo que sigue quedaría debajo de la imagen y no se vería. Seguro, hay muchas más opciones, pero la que mejor se adecúa es usando la medida vh, con solo agregar height: 100vh, ya tendremos nuestra imagen ocupando todo el alto. Veamos un ejemplo.
Compatibilidad
Debemos saber que estas medidas solo funcionan en ie9+, Chrome 34+, Firefox 19+, Safari 7+, Android 4.4+ y iOS 6+. En safari y chrome de iOS 6 y 7, vh genera un comportamiento erróneo. Les dejo unos links con algunas soluciones: link1 y link2.
Las medidas vh y vw nos sirven mucho para determinadas tareas que deseemos hacer como: la imagen de fondo o el tamaño de texto según el viewport. Así que, si las van a usar tengan en cuenta la compatibilidad y los errores que provocan en iOS. Si quieren seguir aprendiendo desde cero les recomiendo que visiten nuestro curso de HTML y CSS. Nos vemos en un siguiente tutorial.