Conversor
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>). Si la base es 16px, entonces 1rem = 16px. Al cambiar el font-size del documento, todos los valores en rem escalan proporcionalmente, lo que facilita el diseño responsivo global.
em es relativo al
font-size del elemento padre (o del mismo elemento si se usa en font-size). Esto puede generar efectos de cascada en elementos anidados. rem evita ese problema porque siempre es relativo a la raíz. Para espaciados y tamaños dentro de componentes auto-contenidos, em puede ser preferible.
Los píxeles son fijos y no respetan las preferencias de fuente del usuario en el navegador. Con
rem, si el usuario aumenta el tamaño de fuente base en su navegador, todo el contenido escala correctamente, mejorando la accesibilidad. Además, las guías WCAG 1.4.4 recomiendan que el texto pueda escalar hasta 200% sin pérdida de funcionalidad.
Algunos proyectos usan el truco de establecer
html { font-size: 62.5%; } para que 1rem = 10px, facilitando el cálculo mental. Otros frameworks o CMS pueden tener una base diferente. Usa el campo "base" para ajustar el conversor a tu proyecto específico.