Conversor de PX a REM/EM gratuito
Convierte valores de píxel a REM o EM y de vuelta, usando tu propio tamaño de fuente raíz. Esencial para construir layouts CSS accesibles y escalables que respetan las preferencias de tamaño de fuente del usuario.
¿Convirtiendo a unidades de viewport en su lugar? El Conversor de Px a Viewport hace el mismo trabajo para vw y vh, y CSS a Tailwind reescribe las reglas resultantes.
Cómo usar PX a REM
- 1 Introduce el valor en píxeles que quieres convertir.
- 2 Fija el tamaño de fuente raíz: 16px es el valor por defecto del navegador, pero cámbialo si tu proyecto usa otra base.
- 3 Lee el equivalente en rem, y en em donde un valor relativo al padre sea más apropiado.
- 4 Cambia de dirección para convertir rem de vuelta a píxeles.
Cómo usarlo
Fija el tamaño de fuente raíz (16px por defecto), luego escribe un valor en píxeles para obtener su equivalente REM/EM, o escribe un valor REM para convertir de vuelta a píxeles. Se incluye una tabla de conversión de 1px a 64px.
- PX a REM y REM a PX en ambas direcciones
- Tamaño de fuente raíz configurable
- Maneja EM con un tamaño padre personalizado
- Tabla de conversión de referencia rápida
- Copia resultados individuales
¿Por qué usar REM y EM?
Las unidades REM son relativas al tamaño de fuente raíz (html), así que los layouts construidos con REM escalan correctamente cuando un usuario cambia el tamaño de texto de su navegador, una victoria clave de accesibilidad. Las unidades EM son relativas al elemento padre y son útiles para el escalado a nivel de componente.
Preguntas frecuentes
¿Por qué usar rem en lugar de píxeles?
Porque rem respeta el tamaño de fuente del usuario. Un visitante que haya subido el valor por defecto de su navegador a 20px por legibilidad recibe el texto escalado en consecuencia; los píxeles codificados a mano ignoran esa preferencia por completo y son uno de los fallos de accesibilidad más comunes.
¿Cuál es la diferencia entre rem y em?
rem es relativo al tamaño de fuente del elemento raíz, así que es consistente en todas partes. em es relativo al padre del elemento actual, así que se compone: anidar tres elementos de 1.5em da 3.375× el tamaño original, no 1.5×. Usa rem para tamaños, em para espaciado que deba escalar con su propio componente.
¿Por qué 16px es el tamaño raíz por defecto?
Es el valor por defecto con el que vienen todos los navegadores de escritorio y móviles, así que 1rem equivale a 16px salvo que lo sobrescribas. Cambiar el tamaño raíz es una técnica legítima para escalar todo un diseño, pero rompe cualquier suposición de que 1rem son 16px.
Conversores de unidades y datos relacionadas
También te puede interesar
Herramientas de otras categorías que suelen combinarse con PX a REM: