¿Qué es el conversor de REM a PX?
El conversor de REM a PX es una herramienta que transforma las unidades relativas em (REM) en píxeles (PX). En el desarrollo web, REM es una unidad relativa que toma como referencia el tamaño de fuente del elemento raíz (normalmente el elemento <html>), mientras que PX es una unidad absoluta. Este conversor ayuda a los desarrolladores a mantener diseños escalables y accesibles, al tiempo que les permite saber a cuántos píxeles equivalen realmente sus valores en REM.
Cuándo usar el conversor de REM a PX
Esta herramienta resulta especialmente útil en las siguientes situaciones:
- Cuando diseñas sitios web responsive y necesitas pasar de unidades relativas a absolutas.
- Cuando trabajas con sistemas de diseño que usan unidades REM, pero necesitas los valores en píxeles como referencia.
- Cuando implementas diseños a partir de mockups que indican las medidas en píxeles, pero prefieres programar con unidades REM.
Cómo calcular de REM a PX
La conversión de REM a PX sigue una fórmula muy sencilla:
PX = REM × Tamaño de fuente raíz
Donde:
- PX es el valor resultante en píxeles.
- REM es el valor relativo em que quieres convertir.
- El tamaño de fuente raíz es el tamaño base del elemento html (por defecto suele ser 16px en la mayoría de los navegadores).
Como ves, el valor de rem es relativo al tamaño de fuente raíz. Esto significa que si asignas un tamaño de fuente de 16px al elemento <html> en tu CSS, de esta forma:
Entonces 1rem = 16px.
Ejemplos
Conversión básica de REM a PX
Convierte 1.5rem a píxeles con el tamaño de fuente raíz por defecto de 16px.
| Valor en REM | Tamaño de fuente raíz | Cálculo | Resultado |
|---|---|---|---|
| 1.5rem | 16px | 1.5 × 16 | 24px |
Convertir varios valores en REM
Convierte 0.75rem, 2rem y 3.5rem a píxeles con un tamaño de fuente raíz de 16px.
| Valor en REM | Tamaño de fuente raíz | Cálculo | Resultado |
|---|---|---|---|
| 0.75rem | 16px | 0.75 × 16 | 12px |
| 2rem | 16px | 2 × 16 | 32px |
| 3.5rem | 16px | 3.5 × 16 | 56px |
Tamaño de fuente raíz personalizado
Convierte 2.5rem a píxeles con un tamaño de fuente raíz personalizado de 20px.
| Valor en REM | Tamaño de fuente raíz | Cálculo | Resultado |
|---|---|---|---|
| 2.5rem | 20px | 2.5 × 20 | 50px |
Tabla de conversiones habituales de REM a PX
Aquí tienes una tabla de referencia con los valores en REM más habituales convertidos a píxeles (tomando como base el tamaño de fuente raíz por defecto de 16px):
| Valor en REM | Valor en píxeles |
|---|---|
| 0.25 rem | 4 px |
| 0.5 rem | 8 px |
| 0.75 rem | 12 px |
| 0.875 rem | 14 px |
| 1 rem | 16 px |
| 1.125 rem | 18 px |
| 1.25 rem | 20 px |
| 1.5 rem | 24 px |
| 1.875 rem | 30 px |
| 2 rem | 32 px |
| 2.25 rem | 36 px |
| 2.5 rem | 40 px |
| 3 rem | 48 px |
| 4 rem | 64 px |
| 5 rem | 80 px |
Calculadoras relacionadas
Si quieres descubrir más herramientas de desarrollo y diseño web, echa un vistazo a estas calculadoras relacionadas:
