Convertidor de unidades CSS para px, rem y em
El Convertidor de unidades CSS transforma un valor de px a rem (o de rem a px, de px a em) a cada una de las demás unidades en el momento en que escribes, usando tu propio tamaño de fuente base. Ingresa un número, elige la unidad de partida y lee px, rem y em uno al lado del otro.
Está pensado para desarrolladores front-end y diseñadores que migran un diseño de píxeles fijos a unidades relativas. Ajusta el tamaño de fuente base para que coincida con tu html { font-size } y los cálculos serán fieles a tu proyecto real, sin asumir un valor fijo de 16px.
Cómo convertir unidades CSS
Define tu tamaño de fuente base
El Tamaño de fuente base empieza en 16px, el valor estándar del navegador. Cámbialo para que coincida con el html { font-size } raíz de tu proyecto y así los resultados rem y em serán exactos.
Elige la unidad de entrada
Haz clic en la pestaña px, rem o em para indicarle al convertidor en qué unidad está tu valor.
Ingresa un valor
Escribe cualquier número y observa cómo px, rem y em se actualizan en tiempo real. Toca un botón de Prueba ejemplos como 16px o 1.5rem para cargar un valor común al instante.
Copia el resultado
Haz clic en el botón de copiar junto a cualquier fila para copiar el valor con su sufijo de unidad, como 1.5rem, listo para pegarlo directamente en tu CSS.
¿Necesitas una sola dirección? Abre un par enfocado como PX a REM, REM a PX o PX a EM. Ambos campos son editables, así que puedes escribir en cualquiera de los dos, y el botón Invertir cambia al par contrario conservando tu valor.
Funciones
Conversión en tiempo real
Los valores se actualizan en cuanto escribes, convirtiendo entre px, rem y em sin pulsar ningún botón.
Tamaño de fuente base ajustable
Define el tamaño de fuente raíz de 1 a 100px (16px por defecto) para que rem y em coincidan con tu proyecto real.
Precisión de decimales ajustable
Elige de 1 a 6 decimales para controlar la precisión de los valores convertidos.
Pares bidireccionales
En los pares enfocados PX a REM, REM a PX y PX a EM, escribe en cualquier campo y el otro se actualiza solo.
Invertir dirección
Un clic invierte un par de conversión y lleva tu valor actual a la dirección opuesta.
Tabla de referencia rápida
Una tabla expandible muestra 18 valores de píxeles comunes de 8px a 96px junto a sus equivalentes en rem y em.
Copia en un clic
Copia cualquier resultado con su sufijo de unidad incluido, como 1.5rem, para pegarlo directamente en tu hoja de estilos.
Botones de ejemplo rápido
Botones predefinidos para tamaños comunes como 12px, 16px, 24px y 1.5rem cargan un valor con un solo toque.
Tarjetas informativas de unidades
Tarjetas breves explican qué son px, rem y em y cuándo es adecuada cada unidad.
Ajustes guardados y compartidos
Tu tamaño base y la precisión de decimales se conservan en localStorage y se sincronizan entre la página principal y cada par.
Preguntas frecuentes
¿Cómo se convierte px a rem?
Divide el valor en píxeles entre el tamaño de fuente base (raíz): rem = px ÷ base. Con la base de 16px por defecto, 24px se convierte en 1.5rem. Este convertidor hace la división por ti y se actualiza en cuanto escribes, así nunca aplicas la fórmula a mano.
¿Cuál es la fórmula de rem a px?
Multiplica el valor en rem por el tamaño de fuente base: px = rem × base. Con una base de 16px, 1.5rem equivale a 24px. Cambia el campo Tamaño de fuente base si tu proyecto usa otro tamaño raíz y el resultado se ajusta.
¿rem siempre se basa en 16px?
16px es solo el valor por defecto. rem es relativo al tamaño de fuente raíz de <html>, que la mayoría de los navegadores fijan en 16px, pero puedes cambiarlo en el CSS. Por eso el convertidor incluye un campo Tamaño de fuente base — ajústalo al tamaño raíz real de tu proyecto para obtener resultados exactos.
¿Cuál es la diferencia entre em y rem?
rem siempre es relativo al tamaño de fuente del elemento raíz, por lo que se mantiene constante en toda la página. em es relativo al tamaño de fuente del elemento padre, lo que significa que los valores em se acumulan al anidar elementos — 1.2em dentro de 1.2em da como resultado 1.44× el tamaño raíz.
¿Cuándo conviene usar rem en lugar de px?
Usa rem para tipografía, espaciado y tamaños de diseño que quieras escalar según las preferencias del usuario — quienes aumentan el tamaño de fuente por defecto de su navegador se benefician de los diseños basados en rem. Reserva px para lo que debe quedar fijo, como bordes y sombras.
¿Por qué el par PX a EM muestra "Tamaño de fuente del padre"?
Porque em es relativo al tamaño de fuente del elemento padre y no de la raíz. La etiqueta cambia a Tamaño de fuente del padre como recordatorio de que el tamaño de referencia depende de dónde se ubique el elemento en el DOM, no del tamaño raíz de <html>.
¿Mis ajustes se guardan entre visitas?
Sí. Tu tamaño de fuente base y la precisión de decimales se almacenan en el localStorage de tu navegador y se comparten entre el convertidor principal y cada par enfocado. Persisten después de cerrar el navegador y nada se envía a un servidor.
Aún no hay comentarios. ¡Sé el primero en comentar!