¿Cuándo usar rem, em o px en CSS?

Qué unidades debo usar en CSS? ¿rem, em o px?

Buenas, te ahorro el chau-chau, deberías usar siempre unidades rem y em, ya que son unidades relativas, al contrario que px que es una unidad fija.

Te cuento un poco más, cuando tienes una página HTML, el valor por defecto de la fuente de la raíz es de 16px, pero si el usuario por el motivo que sea (imagina que no ve bien de cerca y aumenta el tamaño de la fuente) cambia este valor al usar valores en rem o em, se recalcularán y se acomodarán mejor, mientras que si usas px esos valores se mantendrán fijos y no dotarán a tu HTML de un responsive apropiado.

¿Sabías qué un documento HTML es responsive por defecto?

Sí, un documento HTML es responsive sin necesidad de escribir ni una sola línea de CSS.

Lo que hace que se rompa ese responsive es el hecho de que usemos valores fijos (píxeles).

¿No me crees? Crea un archivo HTML simple, agrégale un montón de párrafos, algunos encabezados, ábrelo en tu navegador y comienza a reducir el tamaño de la ventana, verás que la página web se adapta sin haber escrito una sola línea de CSS o un Media Query

¿Qué son las unidades em en CSS?

Un em es el tamaño de la letra al cuál se está aplicando esta medida. En decir, como hemos dicho antes, un documento HTML por defecto tiene un tamaño de fuente de 16px así que 1 em será igual a 16px.

La unidad em es escalable y siempre depende de su elemento padre. Por ejemplo, si el elemento body tiene un tamaño de fuente de 16px y un elemento hijo tiene una fuente con tamaño 1.3em, este texto se mostrará de un tamaño un 30% más grande que el del body (20.8px), mientras que si dentro de ese elemento tenemos otro hijo con un font-size de 1.3 em, el tamaño de fuente de este objeto sería un 30% más grande que el tamaño de su padre (27.04px).

Lo pongo más claro:

Body = 1em (16px)

Hijo = 1.3em (16px x 1.3 = 20.8px)

Nieto = 1.3em (20.8px x 1.3 = 27.04px)

¿Qué son las unidades rem en CSS?

La unidad de medida rem es muy similar a em, con la única diferencia de que no es escalable, esto quiere decir que no depende del elemento padre, sino del elemento root del HTML. Rem significa Root Em, o sea, es un em relativo al root.

Esto significa que si el elemento HTML tiene un tamaño de fuente de 16px (como es por defecto), entonces 1rem, sería igual a 16px, y si queremos aplicar un tamaño basado en rem a cualquier elemento de la página, no importará cual sea el tamaño de fuente que tenga asociado ese elemento, ya que 1 rem siempre será igual a 16 pixeles a no ser que se modifique el elemento raíz.

¿Qué son las unidades % en CSS?

La unidad de medida porcentual es la que se usa por defecto en los elementos HTML en donde de manera predeterminada cada elemento de bloque usa un ancho del 100%, es por eso que cuando achicamos la ventana del navegador con una página que no tenga estilos, la página se adapta, ya que siempre usará el ancho total visible.

Supongamos, por ejemplo, que tienes un div que contiene todos los elementos de la página y, según el diseño, este elemento debiera medir 1200 pixeles. En lugar de caer en la tentación de simplemente usar esa medida en pixeles, te recomendaría usar una medida en porcentajes, en donde el máximo ancho del elemento sean esos 1200px:

.container {
    margin: 0 auto;
    width: 90%;
    max-width: 1200px;
    }

Conclusiones

Si lees sobre el tema en los foros verás que hay gente que recomienda sólo usar rem, o sólo usar em... sea como sea, en lo que todos estaremos de acuerdo, es en restringir el uso de px todo lo posible.

Hasta luego 🖖