Calculadora PX a REM
Convierte valores en píxeles a unidades REM para CSS responsive. Establece el tamaño de fuente base de tu proyecto y obtén equivalentes REM precisos al instante.
Cómo Convertir PX a REM
- 1Introduce tu valor en píxeles en el campo PX
- 2Establece el tamaño de fuente base (por defecto 16px en la mayoría de navegadores)
- 3El valor REM se calcula automáticamente
- 4Usa la tabla para ver valores comunes en píxeles convertidos a REM
Ventajas
- Conversión instantánea con tamaño de fuente base personalizable
- Tabla de conversión práctica para valores comunes
- Bidireccional: PX a REM y REM a PX
- Esencial para CSS accesible y responsive
Preguntas Frecuentes
¿Cuál es la diferencia entre PX y REM?
PX (píxeles) son unidades de tamaño fijo que no cambian independientemente de la configuración del navegador del usuario. REM (root em) es relativo al tamaño de fuente del elemento raíz, que los navegadores establecen en 16px por defecto. La fórmula es sencilla: rem = px ÷ tamaño de fuente raíz. Por ejemplo, 24px ÷ 16 = 1.5rem. Como REM escala con el tamaño de fuente del navegador, los usuarios que lo aumentan por razones de accesibilidad verán el diseño escalar proporcionalmente.
¿Por qué 16px es el valor base por defecto?
Todos los navegadores principales tienen un tamaño de fuente raíz predeterminado de 16px, lo que significa que 1rem = 16px por defecto. Si el CSS de tu proyecto establece un font-size diferente en el elemento html — por ejemplo 18px — actualiza la base en esta calculadora para obtener conversiones precisas.
¿Debo usar REM o EM?
REM es relativo al elemento raíz y se mantiene constante sin importar la profundidad del anidamiento. EM es relativo a su elemento padre, por lo que los elementos anidados se acumulan: 1.2em dentro de otro 1.2em equivale a 1,44× el tamaño raíz. Para tamaños de fuente y espaciado de diseño, REM es más fácil de razonar. EM sigue siendo útil para cosas que deben escalar respecto al tamaño de fuente de un componente, como el padding interior de un botón.
¿Cuándo debo seguir usando px en lugar de rem?
PX es adecuado para elementos que no deben escalar con la fuente del navegador: bordes finos (1px), sombras, e imágenes o iconos con dimensiones físicas fijas. Los puntos de ruptura de media queries son un tema debatido — px es más común en la práctica, pero los puntos de ruptura en rem sí responden a las preferencias de texto del usuario. Usa REM para tamaños de fuente, padding, margin y cualquier espaciado que deba crecer o reducirse con las preferencias del usuario.
¿Cómo mejora rem la accesibilidad?
Muchos usuarios con baja visión aumentan el tamaño de fuente predeterminado de su navegador de 16px a 20px, 24px o más. Si tu CSS usa px en todas partes, esa preferencia se ignora silenciosamente. Con rem, todo el diseño escala de forma proporcional — texto, espaciado y contenedores crecen juntos — haciendo la página genuinamente más legible sin JavaScript adicional ni media queries extra.
¿El tamaño de fuente base tiene que ser 16px?
No. Algunos equipos establecen el font-size del elemento html al 62.5% para que 1rem equivalga a 10px, de forma que 16px se convierte en 1.6rem, un número más limpio. Otros usan 10px directamente. Sea cual sea el valor que use tu proyecto, configúralo como base aquí y la calculadora te dará los equivalentes REM precisos para tu configuración específica.