Qué hace el conversor de px a rem y em
Este conversor traduce valores en píxeles (px) a rem y em, y también al revés. Escribe una cantidad en cualquiera de las tres unidades y el conversor calcula automáticamente el valor equivalente en las otras dos. También puedes fijar un tamaño de fuente raíz propio y un tamaño de fuente de contexto em propio, para que las conversiones encajen con las medidas reales de tu diseño.
El campo Valores y cómo se actualiza mientras escribes
En el campo "Valores" escribes la cantidad que quieres convertir, en px, rem o em. Como indica el propio conversor: "Escribe un valor en px, rem o em y los otros dos se actualizan mientras escribes." No hace falta pulsar ningún botón: en cuanto cambias cualquiera de los tres campos, los otros dos se recalculan al instante con el nuevo valor.
El tamaño de fuente raíz y su papel en el cálculo del rem
El campo "Tamaño de fuente raíz (px)" define la base sobre la que se calcula el rem. Por defecto está en 16px, y en ese estado inicial 16px equivalen a 1rem y también a 1em. Si cambias la raíz —por ejemplo, la subes a 20px—, un valor de 30px pasa a equivaler a 1.5rem, en lugar del resultado que darían 16px de raíz. El campo solo acepta números mayores que 0; si escribes algo distinto, el conversor muestra: "El tamaño de fuente raíz debe ser un número mayor que 0."
El contexto em y por qué necesita su propio tamaño
El em no se mide respecto a la raíz de la página, sino respecto al tamaño de fuente del elemento en el que se usa, así que el conversor le dedica un campo aparte: "Tamaño de fuente del contexto em (px)". También empieza en 16px. Si ese elemento tiene, por ejemplo, un tamaño de fuente de 24px, un valor de 12px equivale a 0.5em con ese contexto. Igual que con la raíz, el contexto em solo admite números mayores que 0; de lo contrario aparece: "El tamaño de fuente del contexto em debe ser un número mayor que 0."
La tabla de conversiones habituales de 16px
Debajo de los campos, el conversor muestra la tabla "px → rem habituales (base de 16px)", con valores de píxeles frecuentes ya convertidos a rem asumiendo una raíz de 16px. Así, por ejemplo, 24px equivalen a 1.5rem con esa raíz, sin que tengas que escribir cada valor uno por uno cuando solo quieres consultar una conversión típica.
Valores negativos y mensajes de error
El conversor admite valores de píxeles negativos, así que puedes convertir márgenes o desplazamientos negativos igual que cualquier otro valor. Si el campo "Valores" queda vacío o con algo que no es un número, el mensaje que aparece es: "Escribe un número para convertir."
Privacidad y a quién le sirve este conversor
Cada conversión se hace en tu navegador. Nada de lo que escribes se sube a BroBroGo. Este conversor está pensado para quien necesita pasar valores fijos en píxeles a unidades relativas como rem o em para un diseño responsive, para quien quiere entender cómo distintos tamaños de fuente raíz cambian los valores en rem, para quien necesita calcular valores en em a partir del tamaño de fuente de un elemento concreto, y para quien quiere que sus medidas se ajusten correctamente cuando un lector cambia el tamaño de fuente predeterminado de su navegador.
Preguntas frecuentes
¿Qué diferencia hay entre px, rem y em? px es una longitud fija. rem se mide respecto al tamaño de fuente raíz de la página, así que con una raíz de 16px, 1rem equivale a 16px. em se mide respecto al tamaño de fuente del elemento en el que está. Definir el texto y los espacios en rem hace que todo se ajuste cuando alguien cambia su tamaño de fuente predeterminado.
¿Por qué hay un tamaño de contexto em aparte? em es relativo al tamaño de fuente de su propio elemento, que no siempre es el raíz. Ajusta el contexto em al tamaño de fuente de ese elemento para leer bien el em; déjalo igual que la raíz cuando ambos coincidan.
¿Y si mi tamaño de fuente raíz no es 16px? Cambia el campo de tamaño de fuente raíz para que coincida con tu CSS y cada valor en rem se actualiza al instante. La tabla de abajo es una guía rápida para la raíz de 16px con la que arrancan la mayoría de los sitios.