En este tutorial vamos a conocer y veremos un ejemplo con las unidades vh y vw, que introdujo la versión 3 de CSS.

Seguro muchos de nosotros conocemos las unidades px, em, rem, % y pt, pero quizás no todos conocían o usan las unidades de medida vh y vw. Es por eso, que hoy responderemos a las preguntas ¿Qué son estas medidas? y ¿Cómo usarlas en nuestros proyecto?

¿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.

See the Pen YyJqma by Edwin Gonzales Melquiades (@edwinpgm) on CodePen.

¿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.

See the Pen mezEyG by Edwin Gonzales Melquiades (@edwinpgm) on CodePen.

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.