Cómo convertir píxeles a rem en CSS (Guía sencilla)

Cómo convertir Píxeles a rem en CSS (Guía Sencilla)

¿Alguna vez has construido un sitio web precioso y perfecto al píxel, solo para darte cuenta de que se ve completamente roto en el momento en que un usuario aumenta el tamaño de fuente predeterminado de su navegador? Sí, a mí también me ha pasado. Ese suele ser el momento exacto en el que los desarrolladores aprendemos por las malas que codificar píxeles (px) de forma rígida para absolutamente todo es la receta perfecta para una pesadilla de accesibilidad.

Entra en escena la unidad rem.

Si estás acostumbrado a pensar estrictamente en píxeles, cambiar a rem puede parecerse un poco a intentar aprender un idioma extranjero sobre la marcha. Pero no te preocupes: una vez que entiendes el concepto, en realidad te facilita mucho la vida como desarrollador.

Vamos a desglosar cómo convertir px a rem sin necesidad de un título en matemáticas.

¿Por qué estamos hablando de Rem?

Piensa en los píxeles como una medida absoluta. Imagina que estás construyendo una casa y le dices a tu contratista: «Haz esta ventana de exactamente 40 pulgadas de ancho». Esa ventana va a tener 40 pulgadas de ancho pase lo que pase con el resto de la casa. Eso es un píxel.

Ahora, piensa en rem como una medida relativa. En lugar de usar pulgadas fijas, le dices al contratista: «Haz esta ventana de exactamente 3 veces el ancho de nuestros ladrillos de cimentación estándar». Si decides usar ladrillos más grandes más adelante, la ventana se escala automáticamente de forma proporcional.

En CSS, rem significa «root em» (em de la raíz). Simplemente significa «relativo al tamaño de fuente del elemento HTML raíz». Dado que los usuarios pueden (y de hecho lo hacen) entrar en la configuración de su navegador para cambiar el tamaño de fuente predeterminado para mejorar la legibilidad, usar rem significa que todo tu sitio web se escalará sin problemas para adaptarse a sus preferencias. Tu diseño no se romperá y tu texto seguirá siendo perfectamente legible. Todos ganan.

La matemática estándar: Cómo convertir

Aquí está la regla de oro que debes memorizar: Por defecto, casi todos los navegadores web modernos establecen su tamaño de fuente raíz en 16px.

Esto significa que, a menos que lo cambies específicamente en tu CSS, 1rem equivale a 16px.

Para convertir cualquier valor de píxel que tengas en mente a un valor rem, simplemente usa esta fórmula básica:

Valor de píxel deseado ÷ Valor de píxel base (16) = Valor rem

Supongamos que estás mirando un diseño de Figma y necesitas que un encabezado sea de 24px. Simplemente divides 24 por 16.

• 24 ÷ 16 = 1.5

• Entonces, en tu CSS, escribes: font-size: 1.5rem;

¿Necesitas un pie de foto más pequeño de 14px?

• 14 ÷ 16 = 0.875

• Entonces, escribes: font-size: 0.875rem;

Mira, lo entiendo. Hacer divisiones de cabeza mientras estás concentrado programando es un fastidio. Si prefieres saltarte la gimnasia mental por completo, te recomiendo mucho tener abierta en una pestaña una herramienta como este Conversor de Píxeles a Rem. Solo introduces tus píxeles y hace el trabajo pesado por ti al instante.

El «Truco del 62.5%» (Haciendo las matemáticas estúpidamente fáciles)

Ahora bien, si no quieres usar una calculadora para cada línea de CSS, a los desarrolladores se les ocurrió un pequeño truco inteligente llamado el Truco del 62.5%.

Así es como funciona. Estableces el tamaño de fuente raíz de html al 62.5% en la parte superior de tu hoja de estilo:


html {
  font-size: 62.5%;
}

¿Por qué 62.5%? Porque el 62.5% de los 16px predeterminados es exactamente 10px.

Al hacer esto, esencialmente has redefinido tu «ladrillo de cimentación estándar» para que sea exactamente de 10px. De repente, las matemáticas se vuelven ridículamente simples. En lugar de dividir por 16, simplemente divides por 10 (lo que significa mover el punto decimal un lugar a la izquierda).

• ¿Quieres 24px? Solo escribe 2.4rem.

• ¿Quieres 14px? Solo escribe 1.4rem.

• ¿Quieres 36px? Solo escribe 3.6rem.

Parece magia. Solo ten en cuenta que si te incorporas a un proyecto existente donde no se tocó el tamaño de fuente raíz, todavía tendrás que confiar en la matemática estándar de dividir por 16.

La Chuleta Definitiva de px a rem

Ya sea que estés dividiendo por 16 manualmente o simplemente necesites una guía de referencia rápida para tener en tu segundo monitor, aquí tienes una chuleta para los tamaños de fuente más comunes (asumiendo el tamaño estándar del navegador de 16px):

Lo que quieres (px)	Lo que escribes (rem)	La matemática utilizada
10px	0.625rem	10 ÷ 16
12px	0.75rem	12 ÷ 16
14px	0.875rem	14 ÷ 16
16px	1rem	16 ÷ 16 (Tamaño base)
18px	1.125rem	18 ÷ 16
20px	1.25rem	20 ÷ 16
24px	1.5rem	24 ÷ 16
32px	2rem	32 ÷ 16
36px	2.25rem	36 ÷ 16
48px	3rem	48 ÷ 16
64px	4rem	64 ÷ 16

Un último consejo antes de irte

No tienes que usar rem para absolutamente todo. Es fantástico para tamaños de fuente, márgenes, rellenos y anchos de diseño. Sin embargo, para cosas decorativas diminutas como un borde fino de 1px (border: 1px solid black), está totalmente bien —y generalmente es preferible— ¡seguir usando los píxeles estándar!

Adelante, programa con responsabilidad. Tus usuarios (y su vista) te lo agradecerán.