Que son y Como funcionan las medidas VH y VW de CSS3

Que son y Como funcionan las medidas VH y VW de CSS3
by Janeth Kent Date: 23-02-2017 css3 webdesign

 

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.

Hoy vamos a conocer las unidades vh y vw, introducidas en la versión 3 de CSS. Qué son estas medidas y cómo usarlas en nuestros proyectos.

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

 
by Janeth Kent Date: 23-02-2017 css3 webdesign visitas : 9874  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Artículos relacionados

Cómo usar el Masking en CSS

Cuando recortas un elemento usando la propiedad de clip-path, el área recortada se vuelve invisible. Si en cambio quieres hacer opaca una parte de la imagen o aplicarle algún otro…

Transiciones y Transformaciones CSS : guia básica con ejemplos

Desde el lanzamiento de CSS3, las transiciones permiten a los diseñadores web y desarrolladores web front-end crear animaciones sin necesidad de usar JavaScript. A partir de este mismo año 2019, las…

Cómo hacer animaciones en CSS3

Las animaciones CSS son una alternativa más poderosa que las transiciones. En vez de confiar en el secuencia de un estado inicial a un estado final, las animaciones pueden tener…

Guía de Flexbox: las bases

En este artículo aprenderemos a manejar los elementos de nuestra web de una manera más eficiente y eficaz, gracias a la propiedad Flexbox. Pero cuidado, no estamos hablando de una simple…

Grid CSS: la unidad fraccionaria

La unidad fraccionaria (fr) es una nueva forma de medición en CSS, asociada en gran medida a la Grid CSS. Finjamos que nos olvidamos de la Grid CSS o de las…

CSS3: Selectores avanzados y pseudo clases. Descripción, uso y ejemplos

Ya sabemos que para aplicar estilos a un documento HTML utilizamos los selectores CSS. Un selector se define como el código que identifica a uno o varios elementos HTML para…

Plugins jQuery para Efectos de Transición de Páginas con CSS3

Todo el mundo sabe que si desea más tráfico en su sitio web y quiere estar en la cima de los resultados de búsqueda también debe tener la página web…

15 increíbles tutoriales para generar efectos de texto con CSS3

Normalmente para añadir efectos sobre textos utilizamos algunos trucos y efectos de Photoshop, pero si hablamos de diseño web entonces podemos conseguir efectos realmente impresionantes tan solo aplicando algo de…

8 útiles herramientas para optimizar CSS

La optimización es una parte fundamental del desarrollo y mantenimiento de un sitio web, algo que a menudo, por falta de tiempo, se nos olvida. La optimización de una web es…

25 Tutoriales CSS3 para efectos avanzados de interfaz de usuario

En este artículo os presentaremos una lista de 25 excelentes tutoriales css3 a través de los cuales podráis aprender los trucos CSS3 de las interfaces avanzadas. 1. Interactive Infographic with SVG…

Clicky