Conversor PX a REM
El Conversor PX a REM permite cambiar al instante entre píxeles (px), root em (rem) y em para cualquier tamaño de fuente raíz configurado. Los píxeles son unidades absolutas fijas a la resolución de pantalla, mientras que las unidades rem escalan en relación al tamaño de fuente del elemento raíz — típicamente 16px en la mayoría de los navegadores. Esto convierte al rem en la unidad preferida para diseño web responsivo y accesible.
Diseñar con rem y em en lugar de px garantiza que los layouts y la tipografía se adapten correctamente cuando el usuario cambia el tamaño de fuente predeterminado del navegador, algo crucial para el cumplimiento de accesibilidad. Ingresa cualquier valor en px, rem o em junto al tamaño base de tu proyecto y obtén al instante los equivalentes en las tres unidades.
Como funciona
rem = px ÷ base; px = rem × base; em = px ÷ tamaño-de-fuente-padre (tratado como base). Base predeterminada: 16px (estándar del navegador).
Casos de uso
- Convertir valores en píxeles de herramientas de diseño a rem para hojas de estilo CSS
- Garantizar tipografía accesible que escale con las preferencias de fuente del usuario
- Definir tokens de espaciado (margin, padding, gap) en rem para layouts responsivos
- Verificar que los tamaños de componentes sean consistentes con diferentes tamaños de fuente base
- Migrar bases de código legadas en px a unidades modernas en rem/em
Preguntas frecuentes
¿Cómo convertir px a rem con una base de 16px?
Divide el valor en píxeles entre el tamaño de fuente base: rem = px ÷ base. Con la base predeterminada de 16px, 24px se convierte en 24 ÷ 16 = 1.5rem, y 8px en 0.5rem. Para el camino inverso, multiplica el valor en rem por la base: 1.5rem × 16 = 24px.
¿Cuál es la diferencia entre rem y em en CSS?
El rem siempre es relativo al tamaño de fuente del elemento raíz, mientras que el em es relativo al tamaño de fuente del elemento padre. Esto significa que los valores em pueden acumularse cuando los elementos están anidados, mientras que el rem se mantiene predecible en toda la página. Este conversor trata el tamaño de fuente del padre como igual a la base, lo que permite comparar px, rem y em directamente.
¿Por qué 16px es el tamaño de fuente base predeterminado?
La mayoría de los navegadores usan un tamaño de fuente raíz predeterminado de 16px, por lo que 1rem equivale a 16px salvo que tú o el usuario lo cambien. Por eso 16px es la base estándar en las conversiones de px a rem. Si tu proyecto define otro tamaño de fuente raíz en CSS, ingresa ese valor como base para obtener resultados correctos.
¿Cuántos rem son 24px, 32px o 40px?
Con la base predeterminada de 16px, 24px = 1.5rem, 32px = 2rem y 40px = 2.5rem. Estos equivalentes cambian si el tamaño de fuente raíz es distinto — por ejemplo, con una base de 10px, 24px sería 2.4rem. Confirma siempre la base de tu proyecto antes de convertir.
¿Debo usar px o rem para los tamaños de fuente?
El rem suele ser preferible para tamaños de fuente y espaciados porque escala cuando el usuario aumenta el tamaño de fuente predeterminado del navegador, algo importante para la accesibilidad. Los valores en píxeles permanecen fijos e ignoran esas preferencias. Un flujo común es tomar los valores en px de las herramientas de diseño y convertirlos a rem en las hojas de estilo.