DevToolPal
ES

Conversor de PX a REM

Convierte px a rem o em (y al revés) con cualquier tamaño de fuente base, consulta una tabla de conversión y convierte de golpe todos los valores px de un CSS pegado.

Se ejecuta en local, nunca se sube

Opciones

Dirección
Unidad

CSS o valores

0 caracteres · 0 B

Resultado

El resultado aparece aquí

Qué hace

Esta herramienta convierte longitudes CSS entre píxeles y las unidades relativas rem y em. Escribe un valor como 24px para obtener 1.5rem, pon varios valores uno por línea para convertirlos a la vez o pega una hoja de estilos completa y se reescribirán en su sitio todos los valores px. Una tabla de referencia muestra los tamaños habituales de 1px a 128px con tu tamaño base. Nada sale de tu navegador.

Cómo se usa

  1. Pega CSS o escribe valores uno por línea. Los números sin unidad se leen como px (o como rem/em si inviertes la dirección), y un valor escrito con la otra unidad se convierte en sentido contrario.
  2. Ajusta el Tamaño de fuente base. Todos los navegadores usan 16px por defecto; algunos proyectos ponen html { font-size: 62.5% } para que 1rem = 10px.
  3. Elige la Dirección (px → rem o rem → px), la Unidad (rem o em) y cuántos Decimales conservar.
  4. Si quieres, usa Mantener valores menores de para dejar en px los bordes de 1px y otras líneas finas.
  5. Copia el resultado con el botón que hay encima.

Ejemplo

/* before */
.title { font-size: 24px; margin-bottom: 12px; }

/* after (base 16px) */
.title { font-size: 1.5rem; margin-bottom: 0.75rem; }

Los valores que no son px, como porcentajes, colores, nombres de archivo en url() y clases como .mt-16px, no se tocan. 0px se convierte en 0.

px, rem y em

  • px es una unidad absoluta: ignora el tamaño de fuente preferido del lector.
  • rem («root em») es un múltiplo del tamaño de fuente del elemento html. Si el lector configura su navegador a 20px, 1rem pasa a ser 20px y todo el diseño escala con él.
  • em es un múltiplo del tamaño de fuente del elemento actual. Es útil para espacios que deben seguir a su texto, pero los em anidados se multiplican; por eso rem es la opción más segura por defecto.

También se convierten las media queries: @media (min-width: 768px) pasa a 48rem (o 48em), lo que mantiene coherentes los puntos de corte cuando el lector amplía el texto. En las media queries, rem y em se refieren al tamaño de fuente por defecto del navegador, no a tu regla html.

Preguntas frecuentes

› ¿Cómo convierto px a rem?

Divide el valor en píxeles entre el tamaño de fuente raíz. Con el valor por defecto de los navegadores, 16px, 24px ÷ 16 = 1.5rem y 12px ÷ 16 = 0.75rem. Para volver, multiplica: 2rem × 16 = 32px.

› ¿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 elemento actual (o de su padre en el propio font-size), por lo que se multiplica al anidar elementos. Usa rem para casi todo y em cuando algo deba escalar con su propio texto, como el relleno de un botón.

› ¿Por qué usar rem en lugar de px?

Si un lector aumenta el tamaño de fuente por defecto en el navegador, las medidas en rem crecen con él y las de px no. rem mantiene el diseño accesible y permite escalar todo cambiando un único valor raíz.

› ¿Debo convertir los bordes de 1px?

Normalmente no. Una línea de 0.0625rem puede verse borrosa o desaparecer con ciertos niveles de zoom. Pon «Mantener valores menores de» en 2px y el conversor dejará en px los bordes y otros valores diminutos.