Conversor de PX a REM
Convierte píxeles a rem con el tamaño de fuente raíz que use tu proyecto. Escribe el font-size del html y el valor en px, copia el resultado en rem y consulta la tabla que se recalcula contigo.
Convertir píxeles a rem
Introduce un número válido para ver la conversión.
El tamaño raíz define cuántos píxeles equivale 1rem. El valor predeterminado del navegador suele ser 16px.
Tabla rápida
| Píxeles | Rem |
|---|---|
| 8px | 0.5rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 32px | 2rem |
| 48px | 3rem |
| 64px | 4rem |
¿Qué es rem?
rem es una unidad relativa de CSS que se calcula con el tamaño de fuente del elemento raíz, no con el del padre. 1rem equivale al font-size de html, que los navegadores ponen en 16px salvo que la hoja de estilos lo cambie. Por eso rem se usa para escalas tipográficas y espaciados que deben respetar el tamaño de letra que elija el usuario.
Como el valor depende del tamaño raíz, un mismo rem son píxeles distintos en cada sitio: con raíz de 16px, 1rem son 16px, y con el truco del 62.5% la raíz es 10px y convertir es mover la coma. Este conversor deja el tamaño raíz a la vista para que conviertas con la convención que use tu proyecto.
Cómo convertir px a rem
- Define el tamaño de fuente raíz, o pulsa 16px para el valor por defecto del navegador y 10px para el habitual 62.5%.
- Escribe el valor en píxeles que quieres convertir, por ejemplo 24 de un archivo de diseño.
- Pulsa Convertir a rem: el resultado muestra el valor, la división de la que sale y un botón para copiarlo.
- Consulta la tabla de referencia para tamaños cercanos; se recalcula con el mismo tamaño raíz, así que toda la página queda coherente.
Ejemplos de px a rem
Raíz por defecto
raíz 16px, 16px
1rem
Valor de diseño
raíz 16px, 24px
1.5rem
Raíz 62.5%
raíz 10px, 20px
2rem
UrsaKit frente a otros conversores de px a rem
| Criterio | UrsaKit | pixelsconverter.com | codebeautify.org | nekocalc.com |
|---|---|---|---|---|
| Precio | Gratis | Gratis con anuncios | Gratis con anuncios | Gratis con anuncios |
| La tabla sigue el tamaño raíz | Sí | No | Parcial | Parcial |
| Presets de 16px / 10px | Sí | No | No | No |
| Muestra la división del resultado | Sí | No | No | No |
| Sube algún archivo | No | No | No | No |
Preguntas frecuentes
¿Cuántos píxeles es 1rem?
Con la raíz por defecto de 16px, 1rem son 16px. Si tu CSS define el font-size de html al 62.5%, 1rem son 10px, así que convierte siempre con la raíz que use el proyecto.
¿Por qué el tamaño raíz por defecto es 16px?
Los navegadores aplican 16px al elemento html, así que 1rem son 16px en una página que no lo cambie. El usuario puede subir o bajar ese valor en sus ajustes, y por eso rem escala con su preferencia y px no.
¿Qué hace definir el font-size de html al 62.5%?
El 62.5% de 16px son 10px, así que 1rem pasa a ser 10px. Se usa porque convertir de px a rem se reduce a dividir entre diez: 24px son 2.4rem.
¿Uso px o rem en el CSS?
Usa rem para tamaños de texto y espaciados que deban escalar con los ajustes del usuario, y reserva px para bordes, líneas finas y todo lo que deba medir lo mismo. Mezclarlos es normal; el problema es convertir sin saber a qué sistema pertenece el valor.
¿Cómo paso 24px a rem?
Divide el valor en píxeles entre el tamaño raíz: 24 ÷ 16 = 1.5, así que 24px son 1.5rem con la raíz por defecto. Con raíz de 10px serían 2.4rem.
¿Se sube algún dato?
No. La conversión ocurre por completo en tu navegador y no se envía nada a ningún servidor.