Saltar al contenido
🛠️
Whiz Tools

Convertidor de PX a REM a EM - Calculadora Gratuita de Unidades CSS

Convierta píxeles a unidades REM y EM al instante. Convertidor gratuito de unidades CSS para diseño web responsivo. Admite tamaños de fuente personalizados y cálculos en tiempo real para resultados precisos.

Convertidor de Unidades PX, REM y EM

Convierta entre píxeles (PX), root em (REM) y em (EM). Introduzca un valor en cualquier campo para ver los valores equivalentes en otras unidades.

px
px
px
rem
em
Visualización no disponible para valores negativos o cero

Fórmulas de Conversión

  • PX a REM: valor en px ÷ tamaño de fuente raíz
  • PX a EM: valor en px ÷ tamaño de fuente del padre
  • REM a PX: valor en rem × tamaño de fuente raíz
  • EM a PX: valor en em × tamaño de fuente del padre
Calculadora de carga...
📚

Documentación

Convertidor de unidades PX, REM y EM

Un convertidor de px a rem y em cambia una longitud CSS entre píxeles (px), em raíz (rem) y em, usando un tamaño de fuente raíz y un tamaño de fuente del elemento padre que establece la persona. Estas tres unidades son las formas más comunes de dimensionar texto y espaciado en CSS, el lenguaje utilizado para dar estilo a las páginas web.

¿Qué son px, rem y em?

Un píxel (px) es una unidad fija. Una caja con un ancho de 200px mantiene un ancho de 200px independientemente del tamaño de fuente que use la página.

Un rem («em raíz») es una unidad que cambia según el tamaño de fuente del elemento raíz de la página, normalmente la etiqueta <html>. La mayoría de los navegadores establece ese tamaño de fuente raíz en 16px, a menos que el sitio lo cambie. Si el tamaño de fuente raíz es de 16px, entonces 1rem equivale a 16px.

Un em es una unidad que cambia según el tamaño de fuente del elemento padre, es decir, el elemento que lo contiene. Si un elemento padre tiene font-size: 20px, entonces 1em dentro de ese elemento equivale a 20px.

La principal diferencia entre rem y em es respecto a qué mide cada una. Rem siempre toma como referencia el elemento raíz. Em toma como referencia el elemento padre más cercano, por lo que su valor puede cambiar en cada nivel de anidamiento.

Cómo calcular de px a rem

Para convertir píxeles a rem, divide el valor en píxeles entre el tamaño de fuente raíz:

r=pRr = \frac{p}{R}

donde r es la longitud en rem, p la longitud en píxeles y R el tamaño de fuente raíz en píxeles.

Ejemplo práctico

Con el tamaño de fuente raíz predeterminado de 16px, 24px se convierte en:

24 ÷ 16 = 1,5rem

Si un sitio establece el tamaño de fuente raíz en 10px (un método habitual que consiste en establecer html { font-size: 62.5%; }, ya que 62,5 % de 16px equivale a 10px), los mismos 24px se convierten en:

24 ÷ 10 = 2,4rem

Cómo calcular de rem a px

Para hacer la conversión inversa, multiplica el valor en rem por el tamaño de fuente raíz:

p=r×Rp = r \times R

donde p es la longitud en píxeles, r la longitud en rem y R el tamaño de fuente raíz.

Con una raíz de 16px, 1.5rem se convierte de nuevo en 1,5 × 16 = 24px.

Cómo calcular de px a em

Para convertir píxeles a em, divide el valor en píxeles entre el tamaño de fuente del elemento padre:

e=pPe = \frac{p}{P}

donde e es la longitud en em y P el tamaño de fuente del elemento padre en píxeles.

Ejemplo práctico

Si el tamaño de fuente del elemento padre es de 20px, entonces 24px se convierte en:

24 ÷ 20 = 1,2em

Cómo calcular de em a px

Multiplica el valor en em por el tamaño de fuente del elemento padre:

p=e×Pp = e \times P

donde p es la longitud en píxeles, e la longitud en em y P el tamaño de fuente del elemento padre.

Con un elemento padre de 20px, 1.2em se convierte de nuevo en 1,2 × 20 = 24px.

Cómo calcular de rem a em y de em a rem

Como rem y em toman como referencia tamaños de fuente distintos, para convertir entre ellas se necesitan tanto el tamaño de fuente raíz como el del elemento padre:

e=r×RPe = r \times \frac{R}{P}

r=e×PRr = e \times \frac{P}{R}

donde R es el tamaño de fuente raíz y P el tamaño de fuente del elemento padre.

Ejemplo práctico

Con un tamaño de fuente raíz de 16px y un tamaño de fuente del elemento padre de 20px, 2rem se convierte en:

2 × (16 ÷ 20) = 1,6em

Si los tamaños de fuente raíz y del elemento padre son iguales, 1rem siempre equivale a 1em.

Cuándo es útil cada unidad

Los píxeles funcionan bien para detalles cuyo tamaño no debe cambiar, como un borde de 1px o un icono de ancho fijo.

Rem es habitual para el espaciado y la tipografía que deben mantener la coherencia en toda una página. Como siempre hace referencia al tamaño de fuente raíz, un valor en rem no cambia por muy profundamente anidado que esté un elemento. Esto también hace que los diseños basados en rem se ajusten automáticamente cuando una persona aumenta el tamaño de fuente predeterminado de su navegador, lo que ayuda a los lectores con baja visión.

Em funciona bien dentro de un componente único e independiente, como un botón, en el que el relleno debe escalar junto con el tamaño de fuente del propio botón. Un problema habitual de em es que se acumula: si varios elementos anidados usan font-size: 1.2em, cada nivel multiplica el anterior, por lo que los tamaños de fuente crecen más de lo previsto.

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

Después de tres niveles, el texto ha crecido aproximadamente un 73 %, no el 20 % que un desarrollador podría esperar de una sola regla 1.2em.

Uso del convertidor

  1. Introduce un valor en el campo de píxeles, rem o em.
  2. Los otros dos campos se actualizan automáticamente y se redondean a cuatro decimales.
  3. Establece el tamaño de fuente raíz para que coincida con el elemento <html> del proyecto. De forma predeterminada es de 16px en la mayoría de los navegadores y solo afecta a rem.
  4. Establece el tamaño de fuente del elemento padre para que coincida con el tamaño de fuente del elemento que contendría un valor em. Solo afecta a em.
  5. Usa el botón de copia situado junto a un campo para copiar su valor.

Ambos campos de tamaño de fuente aceptan un número entero de píxeles, y el mínimo permitido es 1 píxel. El botón de restablecimiento borra el valor y devuelve ambos tamaños de fuente a 16 píxeles.

Debajo de los campos, la herramienta dibuja una barra por unidad. Las tres barras representan la misma longitud física, por lo que tienen el mismo ancho; esta es una comprobación rápida de que la conversión es correcta. Una barra se dibuja con su longitud real en píxeles hasta 300 píxeles; cualquier valor mayor se reduce para que quepa, de modo que un valor de 600 píxeles y uno de 900 píxeles terminan en 300 píxeles. Las barras solo aparecen cuando el valor en píxeles es mayor que cero.

Preguntas frecuentes

¿Cuál es la diferencia entre rem y em? Rem siempre se refiere al tamaño de fuente del elemento raíz. Em se refiere al tamaño de fuente del elemento padre más cercano. Un valor rem permanece igual en toda la página; un valor em puede cambiar según el nivel de anidamiento del elemento.

¿Por qué los navegadores usan 16 píxeles como tamaño de fuente predeterminado? 16 píxeles han sido durante mucho tiempo el tamaño de texto predeterminado en los principales navegadores porque resulta cómodo de leer en pantallas habituales sin estilos adicionales. Las pautas de accesibilidad web recomiendan que el texto pueda ampliarse hasta 200 % sin alterar la disposición de la página, y 16 píxeles es un punto de partida práctico para ello.

¿Qué es el truco de 62,5 %? Establecer html { font-size: 62.5%; } convierte el tamaño de fuente raíz predeterminado de 16 píxeles en 10 píxeles, ya que 62,5 % de 16 es 10. Esto simplifica los cálculos con rem, porque 1,6 rem equivale a 16 píxeles y 2,4 rem equivale a 24 píxeles.

¿Pueden ser negativos los valores px, rem y em? Sí, en las propiedades que aceptan longitudes negativas, como los márgenes o las transformaciones CSS. El relleno no puede ser negativo en CSS; los navegadores ignoran un valor de relleno negativo. El convertidor admite valores negativos, pero no dibuja barras para ellos, porque una barra no puede tener un ancho negativo.

¿Debería convertirse a rem todo valor en píxeles? No necesariamente. Los bordes y otros detalles finos suelen mantenerse en píxeles, ya que rara vez necesitan escalarse con el tamaño de fuente y pueden verse irregulares con anchos inferiores a un píxel. Rem es adecuado para el espaciado y la tipografía que deben escalar con la preferencia de tamaño de fuente del usuario.

¿Afecta la elección de la unidad al rendimiento de la página? No. Los navegadores convierten todas las longitudes CSS al mismo valor interno durante la composición, por lo que px, rem y em se representan con la misma rapidez. La elección entre ellas afecta al mantenimiento y a la accesibilidad, no a la velocidad.