1rem = 16 px. Los navegadores usan 16 px salvo que tu CSS cambie el tamaño de fuente de html.
em es relativo al tamaño de fuente del elemento padre. Si lo dejas vacío, se usa el tamaño raíz.
Todo se hace en tu navegador: el CSS que pegas no se envía a ningún sitio.
Integra esta herramienta en tu web
Gratis y sin cuenta: copia el código y pégalo en tu web, tu blog o tu documentación.
Sobre el conversor de px a rem
Pasa valores en píxeles a rem o em y al revés sin hacer la división a mano. Indica el tamaño de fuente raíz que usa tu CSS, escribe un valor en cualquier campo y los demás se actualizan; copia el que necesites con su unidad. Para migrar una hoja de estilos, pégala y todos los px pasan a rem de una vez. Una tabla de tamaños habituales para tu base está siempre a mano.
Cómo usar el conversor de px a rem
-
Indica el tamaño de fuente raíz
Escribe el tamaño de fuente de tu elemento html en Tamaño de fuente raíz. Deja 16 si tu CSS no lo cambia: es el valor por defecto de todos los navegadores.
-
Convierte un valor
Escribe en Píxeles, REM o EM y los otros dos se actualizan. Para em, pon en Tamaño de fuente del padre el tamaño de fuente del elemento padre; si lo dejas vacío, se usa el tamaño raíz. El botón de copiar de cada campo copia el valor con su unidad.
-
Convierte una hoja de estilos entera
Cambia a Convertir CSS, pega tu CSS y elige px → rem o rem → px. «Mantener 1px en px» y «Saltar las media queries» están activadas por defecto; copia el resultado cuando esté bien.
Casos de uso
Texto que se adapta a cada persona
Los tamaños en rem crecen con el tamaño de texto que cada persona elige en su navegador; los tamaños en px no. Convierte a rem los valores en píxeles de un diseño para que la maqueta respete esa elección.
Del archivo de diseño al CSS
Figma y otras herramientas de diseño dan los tamaños en píxeles. Conviértelos a rem para el tamaño raíz de tu proyecto, o ten abierta la tabla de tamaños habituales mientras escribes CSS.
Migrar una hoja de estilos antigua
Convierte de una vez todos los px de una hoja de estilos antigua a rem, dejando en px los bordes finos y sin tocar las media queries.
Preguntas frecuentes
¿Cómo se convierten px a rem?
Divide los píxeles entre el tamaño de fuente raíz: con los 16 px por defecto, 24px ÷ 16 = 1.5rem. Para volver, multiplica: 1.5rem × 16 = 24px. Si tu CSS pone html { font-size: 62.5% }, el tamaño raíz es 10 px, así que 24px pasa a ser 2.4rem.
¿Qué diferencia hay entre rem y em?
rem es relativo al tamaño de fuente del elemento raíz (html), así que 1rem mide lo mismo en toda la página. em es relativo al tamaño de fuente del propio elemento, que en font-size es el de su padre, así que se acumula al anidar elementos: 1.2em dentro de otro 1.2em es 1,44 veces la base.
¿Por qué mantener en píxeles los valores de 1px?
Un borde de 1px pretende ser una línea fina. En rem cambia con el tamaño de fuente de cada persona, así que puede engordar o quedarse en una fracción de píxel que los navegadores redondean de forma desigual. Mantener 1px y -1px en píxeles deja las líneas finas iguales en todas partes; desactiva la opción para convertirlos también.
¿Las media queries deberían usar rem?
Pueden, pero en una media query rem y em siempre equivalen al tamaño de fuente por defecto del navegador, no al que tu CSS pone en html. Por eso «Saltar las media queries» está activada: con una raíz de 10 px, 768px pasaría a 76.8rem, que una media query lee como unos 1229 px. Con una raíz de 16 px, 768px y 48rem coinciden.
¿La conversión es exacta?
Los resultados se redondean a 4 decimales y se quitan los ceros finales, como 0.9375rem o 0.0313rem; los navegadores trabajan con fracciones de píxel, así que la diferencia no se nota. Solo se convierten los valores en px y rem: em, %, vw y las demás unidades se quedan como están, y no cambia nada dentro de comentarios, textos entre comillas o url().
Herramientas relacionadas
Explora todas las herramientas online gratis de Tooly: todas funcionan en tu navegador y ninguna necesita cuenta.