Unidades de Longitud CSS3 Relativas al Viewport

Css3 potencio la manera de trabajar con diseños responsive, diseños multi pantallas y que se puedan visualizar perfectamente en cualquier dispositivo  hasta tal forma que se hicieron algunos ajustes en cuanto a las unidades de longitud que utilizamos comúnmente. Se trata de las unidades de longitud relativas al viewport donde se esta visualizando la pagina web, estas mediadas son las ideales para trabajar con diseños responsives.  Estas son las Unidades de longitud vw, vh, vmin y vmax.

Estas Unidades definen una longitud porcentual al tamaño del viewport que es la parte visible del documento establecido por medio de esta etiqueta HTML en los diferentes dispositivos donde se puede visualizar una pagina web.

Ahora, se suele utilizar para diseños responsives medidas de porcentajes, para dar anchura a bloques, y sabemos que estas medidas basadas en porcentajes dependen de un elemento padre de cual toma la referencia para adaptarse según el porcentaje dado, esto parece estar bien pero cuando damos pasos avanzados y profundizamos en este concepto “Responsive Design” esto se puede tornar un poco complejo. Es aquí donde entran estas medidas relativas al viewport, que básicamente nos dan la opción de utilizar una unidad que es relativa a un valor que ya es fijo, en vez de un valor heredado de un elemento padre.

Así que, veamos de que tratan estas unidades de longitud CSS3.

Unidades relativas viewport vw y vh

Bueno, estas siglas para las unidades son bastante explicitas, la v en ambas significan viewport y la w y la h width y height, osea la anchura y altura del viewport. En otras palabras estas unidades son relativas a las dimensiones de la ventana grafica del dispositivo.

viewport-vh-y-vw-longitud-css

Cada numero que demos al valor de esta unidad corresponderá al 1% de la longitud de la ventana grafica del dispositivo.

En el código anterior estamos dando el 50% del alto del div con clase bloque, por que como dije antes, una unidad es igual al 1% del ancho o altura del valor verdadero de la ventana grafica del dispositivo.

Ahora, si nos fijamos en el siguiente código.

Este div siempre ocupara el 100% del ancho y la mitad, o 50% del alto del viewport o ventana grafica del dispositivo.

Parece ser mas de lo mismo, pero cuando trabajas estrictamente con diseño para diferentes resoluciones y dispositivos veras que el uso de estas medidas son casi obligatorias. Por que no dependemos en cierta forma de un elemento padre, si no del viewport o ventana grafica del dispositivo del usuario.

Unidades de Longitud vmax y vmin

Estas dos unidades de longitud vamx y vmin son el complemento de las anteriores y también están disponibles para su uso.

Con vmax vamos a referirnos a la mayor longitud del viewport o ventana grafica, ya sea el alto o el ancho.
Con vmin vamos a utilizar y a referirnos a valor de menor longitud del establecido.

viewport-vmin-y-vmax

Por ejemplo, si un viewport o ventana grafica es equivalente a una resolución de 800px * 600px el vmax seria la longitud mayor, que seria 800px y el vmin la longitud mínima que seria la de 600px.

Y esto seria todo por ahora, faciles de entender cierto, también son muy utiles para profundizar en el concepto de responsive design.

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo