Cómo convertir px a rem, em y porcentaje

Por qué importa la unidad

Los píxeles son exactos, y ese es también su límite. Un diseño cerrado en px no sigue el tamaño de letra que el lector pone en el navegador. rem depende de la fuente raíz, así que el texto y los espacios pueden escalar juntos. em depende de la fuente del propio elemento: sirve dentro de un componente y se rompe con facilidad cuando las reglas se anidan.

El convertidor de unidades CSS cubre las dos tareas: un número a la vez en px, rem, em y %, y un bloque CSS entero de una unidad a otra. El tamaño base lo eliges tú. El valor habitual del navegador es 16px.

Paso a paso

Abre el convertidor de unidades CSS. La primera pestaña lleva el nombre de la base, 16px. Los botones 16px, 14px, 18px y 20px cambian esa base. Si el sistema de diseño usa otro número, escríbelo en el campo.
Quédate en Convertidor de unidades. Escribe un valor y elige su unidad. Con la base en 16px, 24 en px da 24px, 1.5rem, 1.5em y 150%. El redondeo está en 4 decimales, así que las tarjetas muestran 1.5000rem. Cada tarjeta tiene su botón Copiar.

Convertidor de unidades: base 16px, entrada 24px, resultados 24px, 1.5rem, 1.5em y 150%
En este modo, rem y em se dividen por la base que indicaste. Aquí no se lee una regla padre. Eso ocurre en el modo siguiente.
Abre Convertidor de código CSS. Deja De en px y A en rem y pega el bloque de la tarjeta de la sección siguiente. Con una base de 16px la salida es 1rem, 1.5rem, 0.5rem, 1.25rem y 0.75rem.

El convertidor de código CSS pasa un bloque de px a rem, con el aviso de anidación encima
Copia la salida y revísala. El aviso amarillo está ahí por algo: las media queries y los selectores que la herramienta no entiende pueden quedar mal.

El bloque de la captura

.card {
  font-size: 16px;
  padding: 24px;
  margin: 8px;
}
.card .title {
  font-size: 20px;
  margin-bottom: 12px;
}

Un padding de 24px pasa a 1.5rem. El título de 20px pasa a 1.25rem. Un margin de 8px pasa a 0.5rem, y 12px pasa a 0.75rem.

Consejos

Fija la base antes de convertir. 24px es 1.5rem solo con una base de 16px. A 18px, esos 24px son 1.3333rem.
Una pestaña por proyecto. Añadir pestaña guarda otra base. Las pestañas, el modo y el redondeo se quedan en el almacenamiento local del navegador.
Usa rem para el texto que debe seguir al lector. Los márgenes que también dependen de la raíz encajan en rem.
Usa em cuando el espacio pertenece al componente. En el convertidor de código, em sigue el font-size que la herramienta ve en esa regla. En la tabla, em usa simplemente la base.
No pases una hoja enorme a ciegas. Convierte un componente, lee la salida y entonces pégala.

Preguntas frecuentes

¿Qué tamaño base uso?

16px, salvo que el diseño diga otra cosa. Es el valor habitual del navegador. Los botones cubren 14px, 18px y 20px.

¿Por qué rem y em coinciden en la tabla?

La tabla convierte las dos unidades desde la base que escribiste. No mira un selector padre. El em anidado se calcula en el convertidor de código CSS.

¿24px siempre es 1.5rem?

Solo con una base de 16px. Cambia la base y las cuatro tarjetas se recalculan al momento.

¿Cualquier hoja se convierte bien?

No. El convertidor avisa de que los selectores complejos, las media queries y parte del anidamiento pueden salir mal. Lee el resultado antes de publicarlo.

Herramientas relacionadas

Convertidor de unidades CSS: la herramienta de esta guía.
SVG a CSS: mete un icono SVG en una regla background.
Generador de favicon: crea los iconos del sitio desde una imagen.
Herramientas web: el resto de la categoría.

Pruébalo

Abre el convertidor de unidades CSS, deja la base en 16px y escribe 24.