Convertidor de px a rem y em: las unidades CSS como las calcula el navegador

Cómo funciona

px = rem × raíz · px = em × padre · rem = px ÷ raíz · em = px ÷ padre

El rem siempre se mide contra el tamaño de fuente de la raíz (<html>), así que da el mismo resultado sin importar qué tan anidado esté un elemento: con una raíz de 16 px, 1.5 rem son 24 px en cualquier parte. El em, en cambio, depende del tamaño de fuente del elemento padre y se acumula: un em dentro de otro em dentro de otro se multiplica. Como mucha gente cambia el tamaño de letra predeterminado del navegador por accesibilidad, medir textos y espacios en rem permite que todo el diseño se adapte a esa preferencia, mientras que los px se quedan fijos.

Ejemplo resuelto

Luis tiene la raíz en los 16 px del navegador y quiere pasar 24 px a rem: 24 ÷ 16 = 1.5 rem. Dentro de un botón cuyo elemento padre tiene 20 px de fuente, esos mismos 24 px equivalen a 24 ÷ 20 = 1.2 em. Y al revés, 24 rem con raíz de 16 px son 24 × 16 = 384 px.

Preguntas frecuentes