Conversor de PX a REM
Escribe un valor en px, rem o em y las demás unidades se actualizan al instante. Cambia el tamaño de fuente raíz si tu sitio no usa 16px, toma valores de la tabla de 1 a 100px o pega una hoja de estilos completa para convertir todos los valores px de una vez.
Última actualización:
Tabla de PX a REM (base 16px)
Haz clic en una celda para copiar su valor en rem.
Convertir CSS
Cómo usar Conversor de PX a REM
- Define el tamaño de fuente raíz. Los navegadores usan 16px por defecto. Si tu CSS define
html { font-size: 62.5% }, usa 10. - Escribe un valor en la casilla PX, REM o EM. Las otras dos casillas se actualizan al instante.
- ¿Necesitas em? Define el tamaño de fuente del elemento padre; em es relativo al padre y rem a la raíz.
- Usa la tabla para consultas rápidas. Haz clic en cualquier celda para copiar su valor en rem.
- Convierte una hoja de estilos: pega el CSS en el conversor de abajo, elige las opciones y copia o descarga el CSS convertido.
Fórmula de PX a REM
Un rem ("root em") es un múltiplo del tamaño de fuente del elemento raíz <html>. Los navegadores fijan ese tamaño raíz en 16px salvo que el visitante o tu CSS lo cambien, así que:
- rem = px ÷ tamaño de fuente raíz p. ej. 20px ÷ 16 = 1.25rem
- px = rem × tamaño de fuente raíz p. ej. 2.5rem × 16 = 40px
- em = px ÷ tamaño de fuente del padre p. ej. 12px dentro de un padre de 18px = 0.6667em
Si tu hoja de estilos define html { font-size: 62.5%; }, la raíz pasa a ser 10px (el 62.5% de 16px) y 1rem = 10px. Pon el tamaño raíz de arriba en 10 para que coincida.
Valores comunes de px a rem (raíz de 16px)
| Píxeles | REM | Uso típico |
|---|---|---|
| 8px | 0.5rem | Espacios pequeños, separación de iconos |
| 12px | 0.75rem | Pies de foto, letra pequeña |
| 14px | 0.875rem | Texto secundario, botones |
| 16px | 1rem | Texto del cuerpo (predeterminado del navegador) |
| 18px | 1.125rem | Texto de cuerpo grande, párrafos de entrada |
| 20px | 1.25rem | Encabezados pequeños |
| 24px | 1.5rem | Encabezados h3, relleno de tarjetas |
| 32px | 2rem | Encabezados h2, espaciado de secciones |
| 48px | 3rem | Encabezados h1, espaciado de portada |
| 64px | 4rem | Texto destacado, espacios grandes de diseño |
rem vs em vs px: ¿cuál deberías usar?
rem es la opción más segura para tamaños de fuente y la mayoría de los espaciados: todos los valores rem de la página se basan en el mismo tamaño raíz, así que es predecible, y crece cuando un visitante aumenta el tamaño de fuente predeterminado de su navegador. em es útil cuando algo debe escalar con su propio componente, como el relleno de un botón que crece con el texto del botón, pero los valores em anidados se multiplican (1.2em dentro de 1.2em es 1.44 veces la raíz). px sigue siendo adecuado para lo que no debe escalar, como los bordes de 1px, los desplazamientos de box-shadow y algunos puntos de corte de media queries.
El conversor de CSS de esta página no toca los comentarios, las cadenas ni las rutas url(), mantiene los valores de 1px por defecto y, salvo que desmarques la opción, no cambia los números dentro de las consultas @media.
Preguntas frecuentes
¿Cómo convierto px a rem?
Divide el valor en píxeles entre el tamaño de fuente raíz. Con la raíz por defecto de 16px, rem = px / 16, así que 24px = 24 / 16 = 1.5rem.
¿Cómo convierto rem a px?
Multiplica el valor en rem por el tamaño de fuente raíz. Con una raíz de 16px, 1.25rem = 1.25 x 16 = 20px.
¿Cuál es la diferencia entre rem y em?
rem es relativo al tamaño de fuente del elemento raíz html, así que es igual en toda la página. em es relativo al tamaño de fuente del elemento padre (o del propio elemento para propiedades distintas de font-size), así que los valores em anidados se multiplican.
¿Por qué usar rem en lugar de px?
Los valores rem se escalan cuando un visitante cambia el tamaño de fuente predeterminado de su navegador, lo que hace el texto y los espaciados más accesibles. Los valores px ignoran ese ajuste en los tamaños de fuente.
¿Cuánto es 16px en rem?
16px es 1rem cuando el tamaño de fuente raíz es el predeterminado del navegador, 16px. 14px es 0.875rem, 12px es 0.75rem y 32px es 2rem.
¿Qué hace html { font-size: 62.5% }?
Define el tamaño de fuente raíz en el 62.5% de 16px, es decir, 10px, así que 1rem = 10px y las conversiones se simplifican: 24px = 2.4rem. Pon la base en 10 en esta herramienta para que coincida.
¿Se deben convertir a rem los bordes de 1px?
Normalmente no. Los bordes finos suelen dejarse en 1px para que se vean nítidos con cualquier nivel de zoom. El conversor de CSS mantiene los valores de 1px por defecto; desmarca la opción para convertirlos también.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.