Conversor de px a rem – Píxeles a rem y viceversa
Convierte valores en píxeles a rem para un CSS adaptable y accesible, o rem de vuelta a píxeles. Ajusta tu propio tamaño de fuente raíz, usa la tabla rápida o pega una hoja de estilos entera para convertir todos los px a la vez.
rem = px ÷ tamaño de fuente raíz. Con los 16px por defecto del navegador, 24px = 1,5rem, 32px = 2rem y 14px = 0,875rem. Escribe un valor en cualquiera de los campos y el otro se actualiza al instante; cambia la fuente raíz si tu elemento html usa otra.
Cómo usar la herramienta: Conversor de px a rem
- Revisa el tamaño de fuente raíz (16px por defecto).
- Escribe píxeles para obtener rem, o rem para obtener píxeles.
- Usa la tabla para los tamaños habituales.
- Pega CSS para convertir todos los px a la vez.
- Copia el CSS convertido.
¿Qué es rem?
rem significa «root em»: una medida relativa al tamaño de fuente del elemento raíz html. Los navegadores usan 16px por defecto, así que 1rem = 16px salvo que lo cambies. A diferencia de em, que depende del elemento padre y se acumula al anidar, rem siempre se refiere al mismo valor raíz y es más predecible.
| px | rem (base 16px) | px | rem (base 16px) |
|---|---|---|---|
| 12px | 0,75rem | 32px | 2rem |
| 14px | 0,875rem | 40px | 2,5rem |
| 16px | 1rem | 48px | 3rem |
| 20px | 1,25rem | 64px | 4rem |
| 24px | 1,5rem | 96px | 6rem |
Los valores más buscados tienen su propia página, por ejemplo 16px a rem, 24px a rem y 32px a rem.
¿Por qué usar rem en lugar de px?
Cuando un visitante aumenta el tamaño de letra predeterminado del navegador —algo habitual en personas con baja visión—, el texto y los espacios en rem crecen con él, mientras que los px se quedan fijos. Usar rem para fuentes, padding, márgenes y media queries mantiene el diseño proporcional y ayuda a cumplir la pauta WCAG 1.4.4 (cambio de tamaño del texto). Los bordes finos y las sombras pueden seguir en px.
El truco del 62,5 %
Algunos proyectos ponen `html { font-size: 62.5%; }` para que 1rem equivalga a 10px y los cálculos sean fáciles (24px = 2,4rem). Funciona, pero sustituye el tamaño elegido por el usuario en todo lo que no se reescale, por eso muchos equipos prefieren mantener 16px y usar un conversor como este. Escribe 10 como fuente raíz para reproducir esa configuración.
Convertir una hoja de estilos completa
Pega CSS en el cuadro de conversión y cada número seguido de px se pasa a rem con tu fuente raíz. 0px se convierte en 0 y los valores de 1px se mantienen por defecto para que los bordes sigan nítidos. Revisa después las media queries: en ellas, rem siempre usa el valor por defecto del navegador, no el de tu html.
Herramientas relacionadas
Redondea esquinas con el Generador de border-radius, diseña sombras con el Generador de box-shadow CSS y minifica el archivo final con el Minificador y embellecedor de CSS.
También te pueden servir estas herramientas gratis: Formateador JSON, Generador de contraseñas y Probador de regex.
Cálculos populares
Preguntas frecuentes
¿Cómo convierto px a rem?
Divide los píxeles entre el tamaño de fuente raíz. Con 16px: 24 ÷ 16 = 1,5rem.
¿Cuántos px son 1rem?
16px por defecto, porque los navegadores usan una fuente raíz de 16px.
¿Qué diferencia hay entre rem y em?
rem depende de la fuente del elemento html; em depende del elemento padre y se acumula al anidar.
¿Uso rem o px para el tamaño de letra?
rem es mejor para la accesibilidad porque respeta el tamaño de letra elegido en el navegador.
¿Puedo convertir un archivo CSS entero?
Sí. Pégalo en el cuadro de conversión y se convertirán todos los valores en px.
Última actualización: