Blog

Nuevas unidades de medida en CSS, modernizando tu trabajo

En el desarrollo web diariamente aparecen nuevos tips, trucos y herramientas que aprender para mejorar el trabajo, pero realmente ¿es necesario aprenderlas todas ? yo creo que es importante mantenernos actualizados, aunque no las aplicamos en práctica todas esas herramientas o trucos que pueden surgir, es importante conocerlos por si en algún momento nos llegan a hacer falta, además, que es mejor que modernizar tu trabajo, un tip muy bueno es las nuevas unidades de medida que nos trae el CSS, dónde te diré alguno que otro tip de utilización y el porque creo que deberías utilizarla.

Unidades de Medida en CSS

En CSS podemos encontrar varios tipos de unidades de medida, las cuales se dividen en dos (2) grupos, relativas y absolutas; las relativas son aquellas que su tamaño depende de algo, es decir si calculamos que sean el 10%, pero este 10% tiene que ser de algo en concreto, como en el caso de su contenedor, entre estas podemos encontrar las unidades ex, em y rem.

Las absolutas son aquellas que su valor está establecido y no dependen de otro elemento como referencia, entre estas están mm, cm, in, px , pt y pc.

Las más comunes utilizadas por nosotros y la mayoría de los desarrolladores que conozco son px, em y rem, solo desde mi punto de vista son las que creo más comúnmente usadas ya que es lo que más he podido apreciar.

Nuevas unidades de CSS VW, VH, VMIN y VMAX

Estas nuevas unidades se encuentran basadas en el viewport (Ventana) del dispositivo que estemos utilizando, se adaptan en porcentaje (%) de acuerdo a el tamaño, es decir estas se encuentran ubicadas en el grupo de unidades relativas.

¿Cómo se utilizan ?

Se utilizan fácilmente, estas hacen referencia al tamaño de la pantalla, vw hace referencia al width (ancho) del viewport y vh hace alusión al height (alto) del viewport, en cambio vmin se refiere al tamaño del viewport que es menor, es decir, si el height de nuestro viewport es más grande que pequeño que el width, esta unidad utilizara ese tamaño como referencia para calcular la medida asignada y por último vmax es lo contrario, esta hace mención al tamaño máximo del viewport.

En conclusión, su uso es sencillo, si colocamos 1vw nos referimos al 1% del width de nuestro viewport, lo mismo con 1vh, es el 1% de el height del viewport, sin embargo, aquí se complica un poco más, 1vmin es el 1% del tamaño mínimo del viewport, es decir si el dispositivo cambia, la unidad cambiará drásticamente con el y 1vmax es justamente lo contrario, el 1% del tamaño máximo del viewport, hay que tener cuidado utilizando estas, ya que su uso puede tanto ayudar como provocar problemas en diseños responsivos.

¿Por qué la recomiendo ?

Es sencillo de explicar, nos pueden ayudar en el diseño responsive, que más importante que esto ?? el diseño responsive es a dónde apunta todo hoy dia, es una parte vital en el desarrollo web en especial en la escalabilidad del texto y depende los trucos de cómo las uses puedes hacer muchas cosas.

Una forma de usar es en los fonts (fuentes o texto) de nuestro sitio, colocando fontsize: 30vw; y automáticamente el texto será escalable al viewport.

Un tip de como utilizarla para el banner o el slider de tu sitio web, una de las trucos de su aplicación es en utilizarla para colocar el slider o banner de tal modo que ocupe el 100% de nuestro viewport y que se adapte a cualquier dispositivo móvil o tamaño de desktop, generalmente se acostumbra a tomar con javascript o jquery el tamaño del viewport y aplicarlo al slider o banner, pero con esta unidad solo aplicamos el  width: 100vw y height: 100vh al contenedor y automáticamente lo ajustara al viewport del dispositivo. Es sumamente útil ya que no es necesario utilizar javascript o jquery para esto, proporcionando más rapidez a la página al cargar, una cosa que tomar en cuenta.

Así como este podemos encontrar muchos trucos más en las cuales podemos utilizarla, todo depende de que tan imaginativos somos a la hora de su uso.

¿Cual es el soporte en los navegadores ?

El soporte en los principales navegadores más utilizados y a nivel global.

Uso de las nuevas unidades de medida en los navegadores - Can I Use

 Conclusión

Las nuevas unidades de medida que nos trajo CSS son muy útiles cuando nos referimos al diseño web adaptable a dispositivos moviles, aunque hay que tener cuidado con su uso, con respecto a los fonts, pero si ayudan un montón.

Si quieres conversar sobre el tema o tienes alguna duda no tendré ningún problema, escríbeme a alguna de mis redes, te responderé con gusto.

Si te gustó puedes ayudarme compartiéndolo. Muchas Gracias!

Escrito por Carlos Bracho, sígueme en las redes.

Twitter: @CarlosL24295

Google + : Carlos Bracho

Comentarios potenciados por CComment

  • 0Clientes Satisfechos
  • 0Proyectos Culminados
  • 0Tazas de Café
  • 0Visitas
LOGIN