Conversor de PX a REM
Convierte píxeles a rem y em para CSS responsivo.
The browser default is 16px.
Los resultados se actualizan al escribir.
Cómo funciona
Un conversor de px a rem traduce medidas fijas en píxeles a unidades rem, la unidad escalable que sustenta el CSS responsivo y accesible. Un rem se define en relación con el tamaño de fuente raíz de la página, así que dimensionar en rem permite que todo un diseño crezca o se reduzca proporcionalmente cuando un usuario cambia el tamaño de fuente base de su navegador, algo que los píxeles ignoran. Esta herramienta divide tu valor en píxeles entre el tamaño de fuente raíz para dar el equivalente exacto en rem, y el valor em correspondiente. Usar rem importa para la accesibilidad y el mantenimiento. Los lectores que aumentan su tamaño de fuente por defecto, a menudo porque necesitan texto más grande, ven cómo los diseños basados en rem escalan con elegancia mientras que los basados en píxeles quedan fijos. Trabajar en rem también hace trivial el escalado global de la tipografía: cambia el tamaño raíz una vez y todo lo dimensionado en rem lo sigue. Los diseñadores suelen pensar en píxeles, así que un conversor tiende un puente entre una maqueta y la hoja de estilos. La conversión funciona porque un rem equivale al tamaño de fuente raíz, así que el número de rems es el valor en píxeles dividido entre ese tamaño raíz. Con el valor por defecto del navegador de 16 píxeles, 16px son 1rem y 24px son 1,5rem. La unidad em sigue la misma aritmética pero se mide contra su ancestro dimensionado más cercano en lugar de la raíz, por lo que puede acumularse en elementos anidados. Los desarrolladores front-end y diseñadores usan un conversor de px a rem para construir diseños que respeten las preferencias de fuente del usuario.
rem = pixels ÷ root font size
La unidad rem se define como un múltiplo del tamaño de fuente raíz, así que convertir un valor en píxeles equivale a preguntar cuántos pasos del tamaño de fuente raíz caben en él, que es simplemente los píxeles divididos entre el tamaño raíz. Con el valor por defecto común de 16 píxeles, 16px equivale a 1rem y 24px equivale a 1,5rem. La unidad em usa la misma división contra su tamaño de fuente de referencia, así que con una referencia coincidente el valor numérico es idéntico.
Fuente:CSS specification (W3C)
Revisamos todas nuestras herramientas de vez en cuando para garantizar su precisión.
Ejemplo resuelto
Cómo usar esta calculadora
- 1
Introduce tus valores
Introduce pixel value y root font size.
- 2
Ajusta las opciones
Ajusta cualquier opción para adaptarla a tu situación.
- 3
Lee tu resultado
In rem se actualiza al instante mientras escribes, sin botón que pulsar.
Preguntas frecuentes
¿Cuál es la diferencia entre rem y em?
Ambas son unidades relativas, pero se miden contra referencias distintas. Un rem es siempre relativo al tamaño de fuente del elemento raíz, así que se mantiene consistente en toda la página. Un em es relativo al tamaño de fuente de su propio elemento o del ancestro dimensionado más cercano, por lo que puede acumularse cuando los elementos se anidan. El rem es predecible para el diseño, mientras que el em es útil para espaciados que deben escalar con el texto local.
¿Por qué el tamaño de fuente raíz por defecto es 16px?
Los navegadores vienen con un tamaño de fuente raíz por defecto de 16 píxeles, razón por la que 16px equivale a 1rem de fábrica. Este valor equilibra la legibilidad en pantallas y distancias de visión típicas. Los usuarios pueden cambiarlo en la configuración de su navegador, y los diseños dimensionados en rem respetarán esa elección. Mantener la base estándar de 16 píxeles, en lugar de sobrescribirla, respeta a los usuarios que han fijado un tamaño mayor para leer con comodidad.
¿Debo usar rem o px para los tamaños de fuente?
El rem suele preferirse para los tamaños de fuente porque escala con el tamaño base elegido por el usuario, mejorando la accesibilidad para lectores que amplían el texto. Los píxeles quedan fijos sin importar esa preferencia, lo que puede frustrar a quienes necesitan texto más grande. Muchos equipos usan rem para tipografía y espaciado para mantener los diseños flexibles, reservando los píxeles para detalles como bordes finos donde un tamaño fijo es deseable.
¿Cambiar el tamaño raíz rompe mi diseño?
Si tu diseño está dimensionado consistentemente en rem, cambiar el tamaño de fuente raíz escala todo en conjunto de forma proporcional, que es el comportamiento previsto y una función, no un error. Los problemas surgen solo cuando el rem y los píxeles fijos se mezclan sin cuidado, de modo que algunos elementos escalan y otros no. Dimensionar consistentemente en rem te permite reajustar la escala de todo un diseño desde una sola declaración raíz.
¿Cómo convierto de rem a píxeles?
Multiplica el valor en rem por el tamaño de fuente raíz. Con la base estándar de 16 píxeles, 1,5rem por 16 son 24 píxeles. Esta conversión inversa es útil al comprobar un diseño contra una maqueta basada en píxeles o al comunicar tamaños exactos a un diseñador. Recuerda que el resultado depende del tamaño raíz actual, así que si la base cambia, el valor en píxeles equivalente para el mismo rem cambia con ella.
Calculadoras relacionadas
Calculadora de PPP de Pantalla
Halla la densidad de píxeles a partir de la resolución y el tamaño.
Calculadora de Relación de Aspecto
Reduce un ancho y un alto a una relación simple.
Calculadora de Tamaño de Archivo de Imagen
Estima el tamaño de una imagen sin comprimir a partir de sus dimensiones.