Diseño
Conversor px → rem / em
Convierte píxeles a rem y em (y viceversa) con base configurable. Imprescindible para tipografía fluida y layouts responsivos.
px
El valor por defecto de los navegadores es 16px. Cámbialo si tu proyecto usa una base distinta.
px → rem / em
Escribe los píxeles — los resultados se calculan al instante.
px
rem / em → px
Escribe un valor en rem o em — el equivalente en px se calcula al instante.
rem/em
px
Tabla de referencia rápida
Base: 16px
| px | rem | em |
|---|
Conceptos clave
rem (root em) es una unidad relativa al
font-size del elemento raíz (<html>). Con una base de 16px, 1rem = 16px. Cambiar el font-size del documento escala todos los valores rem proporcionalmente, lo que simplifica el diseño responsivo global.
em es relativo al
font-size del elemento padre (o del propio elemento cuando se usa para font-size). Esto puede crear efectos acumulativos en elementos anidados. rem evita ese problema al ser siempre relativo a la raíz. Para espaciados y tamaños dentro de componentes autocontenidos, em puede ser preferible.
Los píxeles son fijos y no respetan la preferencia de tamaño de fuente del usuario en el navegador. Con
rem, si el usuario aumenta el tamaño base de fuente en su navegador, todo el contenido escala correctamente, mejorando la accesibilidad. WCAG 1.4.4 también recomienda que el texto pueda escalarse hasta el 200% sin pérdida de funcionalidad.
Algunos proyectos usan el truco de
html { font-size: 62.5%; } para que 1rem = 10px, facilitando el cálculo mental. Otros frameworks o CMS pueden usar una base diferente. Usa el campo de base para adaptar el conversor a tu proyecto específico.