Decidí escribir sobre este tema ya que me parece que la mayoría de los desarrolladores frontend nos cerramos a «lo conocido» muchas veces.
Esto es muy común cuando hablamos de unidades de medida en CSS, la mayoría utilizamos pixeles(px) por qué es lo conocido o muchas veces por que las herramientas que usamos para maquetar nos dan las medidas de cada elemento en esta unidad de medida.
En esta entrada quiero abordar este tema, no pretendo abarcar todas las unidades que existen sino: las unidades de medida que se utilizan actualmente en el desarrollo web.
Para poder entender mejor los conceptos, primero debemos tener claro lo que son las medidas absolutas y las medidas relativas.
Tabla de contenidos
Medidas absolutas
Estas medidas son las más comunes al trabajar sitios web, su nombre especifica su funcionalidad y es que no dependen de ninguna otra unidad, simplemente es el valor de referencia que le asignemos.
Estas medidas no cambian según las especificaciones del dispositivo, lo ideal es utilizar estas medidas cuando sabemos exactamente el alcance de nuestro proyecto, por ejemplo un sistema que sabemos que solo funcionara en escritorio o en mobile.
Aunque en el párrafo anterior está la reflexión, mucho de lo que hacemos en la web debe verse bien en cualquier dispositivo.
Pixeles (px)
Los pixeles son la unidad de medida más conocida en css y un pixel no es más que unos pequeños puntos luminosos en la pantalla de tu dispositivo, esto quiere decir que el pixel es la unidad más pequeña.
Yo diría que es la medida más famosa para diseñadores ya que utilizan las herramientas de maquetación en esta medida y después como desarrollador nos es más fácil poner todo en pixeles.
Al ser el píxel una medida absoluta, no cambia en lo más mínimo si lo visualizamos en dispositivos con menor resolución y esto puede dar problemas al desarrollar un sitio o aplicación web.
Por lo tanto, no existe esa historia de que el píxel sea «perfecto». Solo si estamos desarrollando un sitio web para un mismo dispositivo, con un mismo tamaño de pantalla y que usa el mismo navegador, pero sabemos que no es así como funciona en el mundo real.
El principal beneficio es que tienen en cuenta la proximidad de la pantalla, al usar un móvil que tengamos cerca de nosotros, el píxel de referencia será similar en tamaño al de un monitor más alejado de nosotros, por ejemplo.
Points (pt)
Esta unidad es la más conocida por diseñadores, así que debemos acostumbrarnos a verla en los wireframes que recibamos del área de UX o UI.
Afortunadamente en estos programas de diseño tenemos la opción de cambiar la vista de la tipografía a otra unidad de medida (como pueden ser px).
Lo principal es saber que esta medida nunca se recomienda para maquetar un sitio.
Medidas relativas
A diferencia de las medidas absolutas, las relativas son las que normalmente no utilizamos.
Estas medidas se calculan dependiendo a otra unidad de medida definida, por ejemplo em y rem, el uso de ellas es más apropiado para que podamos hacer ajustes en diferentes dispositivos asegurando un layout consistente y fluido en distintas medias.
Esto se debe a que estas medidas las calcula el navegador así que nos puede dar diferentes resultados dependiendo de donde se vea el sitio.
Ems (em)
El em se ha hecho muy popular para los desarrolladores web, una de las razones es lo que te comentaba anteriormente que el layout se ajusta siempre al entorno.
Lo que hace especial esta medida es que cambia el tamaño de los elementos hijo dependiendo del tamaño de fuente del elemento padre, como podemos ver en el siguiente ejemplo:
Como observamos en el ejemplo tengo un div padre donde definimos un font-size de 10 pixeles y dentro del mismo div tenemos tenemos un hijo que es otro div.
Esto es importante ya que como mencione anteriormente el tamaño del elemento hijo depende del padre, en este caso la fuente para el elemento hijo será de 20 em.
Explicando el por que es simplemente por que el elemento padre tiene por defecto 10px eso hace que 1em tenga el valor de 10px, entonces:
- 1em = 10px
- 2em = 20px
- 3em = 30px
- Y asi sucesivamente…
Debemos tener en cuenta que podemos también escribir valores como 1.3, 1.4 y hacer el cálculo para tener medidas exactas o conforme las necesitemos.
Esto es muy bueno para que mantener un proyecto sea más sencillo ya que cambiando la fuente del elemento padre se cambiarán la de los hijos automáticamente.
Al igual que el punto anterior puede ser una ventaja, la desventaja del mismo es que para que funcione tendríamos que considerar el font-size de TODOS los elementos padre de nuestro archivo css.
Esto se complica más por ejemplo si tienes un div anidado dentro de otros 4, cada uno tomará el valor del padre y se hará todo un desorden.
Rems (rem)
Al igual que el em, el rem funciona con el font-size pero no del elemento padre sino del root (la raíz) y con esto solucionamos el problema que señalaba anteriormente de tener muchos divs en nuestro contenido.
Es decir, solo nos apoyaremos de un único elemento para definir la fuente de toda nuestra página, pero ¿Donde definimos la fuente del root?
La etiqueta que representa el root de un documento es html, así que haremos lo mismo que con la medida em solo que lo definiremos dentro del elemento html, lo que necesitamos saber siempre es que por defecto los navegadores definen el font-size del documento en 16px.
Entonces por defecto el rem tiene un valor de 16px, principalmente los desarrolladores usamos un «truco» aprovechando el root del documento.
Con esta estrategia lo que logramos hacer es que el valor del píxel siempre será el valor definido en rems por 10, como podemos ver en el ejemplo asi es mas sencillo calcular el valor para utilizar font-size en nuestro documento.
En conclusión: tenemos muchas medidas para usar en la web y la verdad es que no existe la mejor o la que todos usamos ya que todo depende de la familiaridad que tengamos con alguna o del proyecto mismo.
Sin embargo creo importante que las conozcas y siempre las puedas tener en cuenta, si lo que quieres es conocer absolutamente todas te recomiendo esta entrada de aluracursos.
¡Ahora depende de ti el utilizar estas medidas css y ponerlas a prueba en tus proyectos!