Convertidor de REM a PX
Convierte unidades rem de CSS a píxeles. Introduce uno o varios valores rem y el tamaño de fuente raíz (16px por defecto) para obtener píxeles, puntos y una línea de CSS lista para pegar, además de una tabla rápida de 0.125rem a 6rem.
Última actualización:
Un valor, o varios separados por espacios o comas (p. ej., 0.75 1 1.25 2).
El tamaño de fuente del elemento html. Por defecto en el navegador: 16px.
Cómo usar Convertidor de REM a PX
- Introduce un valor rem, o varios separados por espacios o comas.
- Define el tamaño de fuente raíz de tu página: 16px salvo que tu CSS cambie el tamaño de fuente de html.
- Lee los píxeles, además de los puntos y el porcentaje.
- Copia el CSS o usa la tabla rápida para los tamaños habituales.
- ¿Necesitas lo contrario? Usa el convertidor de PX a REM enlazado debajo del resultado.
Fórmula de REM a PX
px = rem × tamaño de fuente raíz y, al revés, rem = px ÷ tamaño de fuente raíz. El tamaño de fuente raíz es el font-size calculado del elemento <html>, 16px por defecto.
Ejemplos con una raíz de 16px: 0.5rem = 8px, 1.25rem = 20px, 2rem = 32px. Con una raíz de 10px (html { font-size: 62.5% }): 1.4rem = 14px, 2.4rem = 24px.
Tamaños REM habituales
| REM | PX (raíz de 16px) | PX (raíz de 10px) | Uso típico |
|---|---|---|---|
| 0.75rem | 12px | 7.5px | Letra pequeña, pies de foto |
| 0.875rem | 14px | 8.75px | Texto secundario, botones |
| 1rem | 16px | 10px | Texto principal |
| 1.125rem | 18px | 11.25px | Texto principal grande |
| 1.25rem | 20px | 12.5px | h5 / texto de entrada |
| 1.5rem | 24px | 15px | h4 |
| 2rem | 32px | 20px | h2 / h1 en móvil |
| 3rem | 48px | 30px | Titulares principales |
Las media queries en rem o em usan el tamaño de fuente por defecto del navegador (normalmente 16px), no el tamaño de fuente de html que definas en el CSS.
Preguntas frecuentes
¿Cómo convierto rem a px?
Multiplica el valor rem por el tamaño de fuente raíz: px = rem × raíz. Con la raíz por defecto de 16px, 1.5rem = 1.5 × 16 = 24px y 0.875rem = 14px.
¿Cuántos píxeles es 1rem?
1rem equivale al tamaño de fuente del elemento raíz html. En todos los navegadores principales es de 16px por defecto, salvo que el CSS de la página o la configuración del navegador del usuario lo cambien.
¿Qué es el truco del 62.5%?
Definir html { font-size: 62.5%; } hace que la raíz sea de 10px (el 62.5% de 16px), así que 1.6rem = 16px y las conversiones son fáciles. Sigue respetando a los usuarios que aumentan su tamaño de fuente por defecto, porque es un porcentaje.
¿Qué diferencia hay entre rem y em?
rem es relativo al tamaño de fuente del html raíz, así que es igual en toda la página. em es relativo al tamaño de fuente del elemento actual (o de su padre en el caso de font-size), así que los valores em anidados se multiplican.
¿Por qué usar rem en lugar de px?
Los tamaños en rem se ajustan a la configuración de tamaño de fuente del navegador del usuario, lo que ayuda a la accesibilidad. Los tamaños de fuente en píxeles ignoran esa configuración en la mayoría de los navegadores, aunque el zoom de la página sigue escalando ambos.
¿Cómo se corresponden las unidades de espaciado de Tailwind con px?
En Tailwind CSS, una unidad de espaciado es 0.25rem, que son 4px con la raíz por defecto de 16px. Así, p-4 = 1rem = 16px y text-sm = 0.875rem = 14px.
¿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.
Herramientas relacionadas
Ver todas las de Conversores de datos y formatos de archivo →