Conversor de px a rem
Convierte valores entre píxeles y rem con el tamaño de fuente raíz que use tu proyecto, o pega un bloque de CSS y cambia todos sus px por rem de una vez.
Convertir un bloque de CSS
Cómo usar el conversor
Comprueba primero el tamaño base: es el font-size del elemento html de tu proyecto. Si no lo has cambiado, es 16 px. Escribe un valor en píxeles para obtener los rem, o en rem para obtener los píxeles: ambos campos se sincronizan. Para migrar una hoja de estilos, pega el CSS en el segundo bloque y copia el resultado; los valores en px de las media queries también se convierten, aunque allí rem y em siempre se calculan con el tamaño predeterminado del navegador, no con el de tu html.
Fórmula
rem = px ÷ tamaño base · px = rem × tamaño base
Con la base de 16 px: 24 px = 24 ÷ 16 = 1,5 rem; 0,875 rem = 0,875 × 16 = 14 px. En el código CSS los decimales se escriben siempre con punto: 1.5rem.
Tabla de equivalencias px a rem
| Píxeles | rem (base 16 px) | rem (base 10 px) |
|---|---|---|
| 1 px | 0,0625 rem | 0,1 rem |
| 2 px | 0,125 rem | 0,2 rem |
| 4 px | 0,25 rem | 0,4 rem |
| 8 px | 0,5 rem | 0,8 rem |
| 10 px | 0,625 rem | 1 rem |
| 12 px | 0,75 rem | 1,2 rem |
| 13 px | 0,8125 rem | 1,3 rem |
| 14 px | 0,875 rem | 1,4 rem |
| 15 px | 0,9375 rem | 1,5 rem |
| 16 px | 1 rem | 1,6 rem |
| 18 px | 1,125 rem | 1,8 rem |
| 20 px | 1,25 rem | 2 rem |
| 22 px | 1,375 rem | 2,2 rem |
| 24 px | 1,5 rem | 2,4 rem |
| 28 px | 1,75 rem | 2,8 rem |
| 32 px | 2 rem | 3,2 rem |
| 36 px | 2,25 rem | 3,6 rem |
| 40 px | 2,5 rem | 4 rem |
| 48 px | 3 rem | 4,8 rem |
| 56 px | 3,5 rem | 5,6 rem |
| 64 px | 4 rem | 6,4 rem |
| 72 px | 4,5 rem | 7,2 rem |
| 96 px | 6 rem | 9,6 rem |
El truco del 62,5 %
Algunos proyectos ponen html { font-size: 62.5%; } para que 1 rem valga 10 px y las cuentas sean inmediatas (24 px = 2,4 rem). Funciona y respeta la preferencia del usuario, porque es un porcentaje; pero obliga a redefinir el tamaño del texto del body (por ejemplo, 1.6rem) y puede confundir a quien herede el código o use componentes de terceros pensados para base 16. Con el conversor puedes trabajar con base 16 sin hacer cálculos.
rem, em, px y otras unidades
- px: unidad fija. Adecuada para bordes finos, sombras y detalles que no deben escalar.
- rem: relativa a la raíz. Ideal para tamaños de texto, márgenes, rellenos y espaciados generales.
- em: relativa a la fuente del propio elemento. Útil para que el relleno de un botón crezca con su texto.
- %, vw, vh: relativas al contenedor o a la ventana; para anchos de diseño. Si necesitas mantener proporciones de imágenes o vídeos, usa la calculadora de relación de aspecto.
Cuando termines de convertir, puedes reducir el tamaño del archivo con minificar CSS. Para radios y sombras, los generadores de border-radius y de sombras CSS te dan el código listo.
Errores comunes
- Poner el font-size del html en px (
html { font-size: 16px; }): anula la preferencia de tamaño del usuario. Usa un porcentaje o no lo declares. - Convertir bordes de 1 px: 0,0625 rem puede renderizarse como 0 o 2 píxeles según el zoom. Mantén los bordes finos en px.
- Usar em en elementos anidados sin darse cuenta: una lista dentro de otra con
font-size: 0.9emse hace cada vez más pequeña.
Preguntas frecuentes
¿Cuántos px es 1 rem?
Por defecto, 16 px, porque es el tamaño de fuente predeterminado de los navegadores. Si el usuario o tu CSS cambian el tamaño de la raíz (html), 1 rem pasa a valer ese nuevo tamaño.
¿Cuál es la fórmula para pasar de px a rem?
rem = px ÷ tamaño base. Con base 16: 24 px ÷ 16 = 1,5 rem. Y al revés, px = rem × tamaño base.
¿Qué diferencia hay entre rem y em?
rem es relativo al tamaño de fuente del elemento raíz (html), siempre el mismo en toda la página. em es relativo al tamaño de fuente del propio elemento o de su padre, por lo que se acumula al anidar elementos.
¿Por qué usar rem en lugar de px?
Porque respeta el tamaño de letra que el usuario configura en su navegador. Si alguien con baja visión elige letra grande, los textos y espacios en rem crecen en proporción; los definidos en px no.