Si has pasado algún tiempo trasteando con CSS, es muy probable que te hayas quedado mirando un boceto de diseño preguntándote: «¿Debería usar píxeles aquí o debería convertir esto a un valor rem?»
Si estás trabajando con el ancho de una pantalla Full HD —específicamente 1920px— y quieres traducirlo a rem, estás en el lugar correcto. Vamos a desglosar las matemáticas exactas, a explicar por qué funciona usando una analogía súper sencilla y a hacer que vuelvas a programar en un abrir y cerrar de ojos.
La respuesta rápida: 1920px a rem
Vayamos al grano. Asumiendo que tu sitio web utiliza el tamaño de fuente predeterminado estándar del navegador de 16px, 1920px son exactamente 120rem.
¿Cómo llegamos a ese resultado? Es una simple división:
1920 ÷ 16 = 120
Eso es todo. Pero si quieres entender por qué dividimos entre 16, por qué nos molestamos con los rem en primer lugar, o cómo evitar hacer estos cálculos por completo, quédate conmigo un minuto.
(Consejo pro: si estás cansado de calcular estos números mentalmente, simplemente guarda en marcadores un práctico convertidor de píxeles a rem para que haga el trabajo pesado por ti).
Píxeles vs. Rems: la analogía de la repostería
Para entender por qué los desarrolladores web están tan obsesionados con los rem, ayuda alejarse del ordenador y dirigirse a la cocina.
Piensa en los píxeles (px) como en un molde para hornear metálico y rígido. Si tienes un molde para tartas de 23 cm (9 pulgadas), siempre va a medir 23 cm. No importa si vas a hornear un pastel para dos personas o para veinte; el molde se niega a cambiar de tamaño. En diseño web, un píxel es una unidad estricta y absoluta. Si estableces una caja en 1920px, se mantendrá en 1920px, incluso si el usuario la está viendo en un smartphone diminuto o tiene problemas de visión y necesita acercar todo con zoom.
Los rems, por otro lado, son como una receta flexible. Imagina una receta de tortitas que pide «1 taza de harina por persona». Si come una persona, usas 1 taza. Si comen cuatro personas, se escala automáticamente a 4 tazas.
En CSS, rem significa «root em» (em raíz). Examina la raíz (el tamaño de fuente base que el usuario ha configurado en su navegador) y escala todo proporcionalmente a partir de ahí.
El número mágico: 16
Por defecto, prácticamente cualquier navegador web configura el tamaño de fuente raíz en 16px.
Por lo tanto, cuando le dices a CSS que cree un contenedor de 1rem de ancho, el navegador dice: «De acuerdo, el tamaño base es 16px. Hagamos que este contenedor mida 16px de ancho».
Si quieres un contenedor (wrapper) Full HD de 1920 píxeles de ancho, solo tienes que preguntarte: «¿Cuántas veces cabe 16 en 1920?».
1920 ÷ 16 = 120
Escribes max-width: 120rem; en tu hoja de estilos y listo. Y bueno, si alguna vez necesitas hacer el cálculo a la inversa (como cuando estás leyendo el código de otra persona y te preguntas qué demonios representa 120rem en términos de pantalla normales), siempre puedes usar un convertidor de rem a píxeles para hacer la ingeniería inversa.
¿Por qué debería importarte? (El enfoque de la accesibilidad)
Quizás estés pensando: «Las matemáticas son molestas. ¿Por qué no simplemente escribo 1920px y doy por terminado el día?».
Totalmente podrías hacerlo. Pero construir con rem hace que tu sitio web sea increíblemente amigable para los usuarios que necesitan aplicar zoom. Si un usuario con discapacidad visual cambia el tamaño de fuente predeterminado de su navegador de 16px a 24px, un sitio diseñado enteramente con px se mantendrá obstinadamente del mismo tamaño, lo que a menudo causa que el texto se solape o se vuelva ilegible.
Si construiste tu sitio con rem, todo el diseño respira y se escala a la perfección, respetando las preferencias del usuario. Es básicamente magia y te hace quedar como un desarrollador de primer nivel al que realmente le importa la accesibilidad.
Tu chuleta rápida de CSS
Si no quieres sacar la calculadora cada vez que escribes CSS, aquí tienes una guía de referencia rápida basada en la raíz estándar de 16px.
La fórmula: Tamaño en píxeles deseado ÷ 16 = valor en rem
- 16px = 1rem (La base)
- 24px = 1.5rem
- 32px = 2rem (Excelente para encabezados estándar)
- 48px = 3rem
- 64px = 4rem
- 768px = 48rem (Punto de interrupción común para tablets)
- 1024px = 64rem (Punto de interrupción estándar para escritorio)
- 1440px = 90rem (Escritorio grande)
- 1920px = 120rem (Monitor Full HD)
La próxima vez que estés frente a un diseño de 1920px, solo recuerda el enfoque de la receta flexible. Divide entre 16, coloca 120rem ¡y sigue creando cosas geniales!