Convertidor PX a REM
Para convertir px a rem, divide el valor en píxeles entre el tamaño de fuente raíz: rem = px / raíz. Con la raíz predeterminada del navegador de 16px, 24px / 16 = 1.5rem. Cambia la base abajo (14px para Ant Design, 10px para el truco del 62,5 %) y los valores rem y em la siguen; el valor en puntos, en cambio, depende de los píxeles, porque 1px siempre son 0,75pt.
Convertir px, rem, em y pt y revisar las sustituciones CSS.
Raíz positiva; magnitud ≤1000 millones; seis decimales redondeados. Vista previa limitada a 8–72px. CSS ≤100 000 caracteres. Solo se convierten tokens px sin comillas en valores; se conservan comentarios, cadenas, URL y content. Revise el resultado: conversor léxico limitado, no validador CSS. Los números CSS con exponente (como 1e+3px o 1e-3px) se conservan como tokens completos.
La conversión se realiza en esta página, sin enviar los números o CSS introducidos a un servicio de conversión.
El campo em asume que el elemento hereda el tamaño de fuente base de arriba. En CSS, em se resuelve contra el tamaño de fuente del propio elemento, y contra el del padre cuando lo usas en la propia propiedad font-size.
Conversión en bloque: pega CSS o una lista de valores en px
Cada valor en px se reescribe en rem según el tamaño de fuente base de arriba.
Copiado
No se pudo copiar. Seleccione el resultado y cópielo manualmente.
¿Cómo convierto px a rem?
La fórmula es rem = px / tamaño de fuente raíz, y a la inversa px = rem x tamaño de fuente raíz. Solo cuenta el tamaño de fuente del elemento html raíz, por muy anidado que esté el elemento, y eso es lo que hace predecible la aritmética con rem. Con la raíz predeterminada de 16px: 10px = 0.625rem, 12px = 0.75rem, 14px = 0.875rem, 18px = 1.125rem, 20px = 1.25rem y 40px = 2.5rem.
No redondees el resultado. 15px son exactamente 0.9375rem con una raíz de 16px; redondear a 0.94rem lleva el tamaño renderizado a 15.04px y rompe la alineación de una rejilla. Los navegadores calculan longitudes subpíxel y las ajustan a la rejilla de píxeles del dispositivo al pintar, así que copia el valor exacto que te da el convertidor. El convertidor imprime hasta seis decimales: exactos con raíces que dividen sin resto, como 16px y 10px, y con una precisión de una millonésima de rem cuando no lo hacen, como 14px.
Tabla px a rem con raíz de 16px, 14px y 10px
El mismo valor en píxeles se convierte en tres valores rem distintos según la raíz que fije tu proyecto, así que esta tabla los recoge los tres, más el equivalente en puntos (CSS define 1px como 1/96 de pulgada y 1pt como 1/72, de modo que 1px = 0.75pt). Las columnas de 16px y 10px son exactas. Con una raíz de 14px la división casi nunca es exacta, así que esos valores se redondean a cuatro decimales y se marcan con el signo de aproximación; el convertidor de arriba muestra más dígitos.
| Píxeles | rem (raíz 16 px) | rem (raíz 14 px) | rem (raíz 10 px) | Puntos |
|---|---|---|---|---|
| 1px | 0.0625rem | ≈0.0714rem | 0.1rem | 0.75pt |
| 2px | 0.125rem | ≈0.1429rem | 0.2rem | 1.5pt |
| 4px | 0.25rem | ≈0.2857rem | 0.4rem | 3pt |
| 8px | 0.5rem | ≈0.5714rem | 0.8rem | 6pt |
| 10px | 0.625rem | ≈0.7143rem | 1rem | 7.5pt |
| 12px | 0.75rem | ≈0.8571rem | 1.2rem | 9pt |
| 14px | 0.875rem | 1rem | 1.4rem | 10.5pt |
| 16px | 1rem | ≈1.1429rem | 1.6rem | 12pt |
| 18px | 1.125rem | ≈1.2857rem | 1.8rem | 13.5pt |
| 20px | 1.25rem | ≈1.4286rem | 2rem | 15pt |
| 24px | 1.5rem | ≈1.7143rem | 2.4rem | 18pt |
| 28px | 1.75rem | 2rem | 2.8rem | 21pt |
| 32px | 2rem | ≈2.2857rem | 3.2rem | 24pt |
| 36px | 2.25rem | ≈2.5714rem | 3.6rem | 27pt |
| 40px | 2.5rem | ≈2.8571rem | 4rem | 30pt |
| 48px | 3rem | ≈3.4286rem | 4.8rem | 36pt |
| 64px | 4rem | ≈4.5714rem | 6.4rem | 48pt |
| 80px | 5rem | ≈5.7143rem | 8rem | 60pt |
| 96px | 6rem | ≈6.8571rem | 9.6rem | 72pt |
px, rem o em: ¿qué unidad debo usar?
El reparto práctico: rem para todo lo que deba seguir el tamaño de texto del lector, em para valores que deban seguir el tamaño de fuente del propio elemento, y px solo donde una longitud tenga que quedarse físicamente fija. La columna de ejemplo asume una raíz de 16px y un padre de 16px.
| Unidad | Relativa a | 20px equivale a | Mejor para | Sigue el tamaño de texto del lector |
|---|---|---|---|---|
| px | Nada: es absoluta (1px = 1/96 de pulgada) | 20px | Bordes de un píxel, anillos de foco, iconos de tamaño exacto | No |
| rem | El tamaño de fuente del elemento html raíz | 1.25rem | Tamaños de fuente, espaciado, breakpoints, escalas tipográficas | Sí |
| em | El tamaño de fuente del propio elemento (el del padre al fijar font-size) | 1.25em | Relleno que debe crecer con la etiqueta que envuelve | Sí |
| % | El valor del padre para esa propiedad | 125% | Anchos fluidos y árboles antiguos de font-size | Sí (font-size) |
¿Debo usar px o rem para relleno, márgenes y bordes?
Usa rem para rellenos y márgenes que deban respirar cuando crece el texto: relleno de botones, huecos de tarjetas, espaciado de secciones, separación de rejilla. Deja px para las líneas finas. Un borde de 1px es un píxel independiente del dispositivo y bien nítido, mientras que ese mismo borde escrito como 0.0625rem puede redondearse a cero o verse borroso con ciertos niveles de zoom, y lo mismo vale para anillos de foco y separadores de 2px. Por eso la conversión en bloque de arriba deja intactos los valores de 1px y 2px y reescribe todo lo demás.
Las media queries son el otro sitio donde rem se gana su sueldo. Dentro de una media query, rem se resuelve contra el tamaño de fuente inicial del navegador y no contra tu regla html, así que un breakpoint de 48rem son 768px para quien use los valores por defecto y crece para quien haya aumentado su tamaño de texto. Los breakpoints en px no se mueven nunca.
¿Cómo convierto px a rem en Figma, VS Code y Tailwind?
Figma mide en px, pero Dev Mode puede emitir rem: abre los ajustes de Inspect, elige «Set unit scale» e introduce tu tamaño de fuente raíz (por defecto, 1rem = 16px). Las extensiones de VS Code como cssrem convierten mediante autocompletado y exponen la raíz como opción (cssrem.rootFontSize, 16 por defecto), así que comprueba que coincide antes de fiarte del resultado en un proyecto de 14px. Para un archivo entero, pégalo en el cuadro de conversión en bloque de arriba y fija antes la base. La escala predeterminada de Tailwind ya está en rem con raíz de 16px: una unidad de espaciado son 0.25rem (4px), así que 16px es 4, 24px es 6 y 40px es 10.
Fuentes
Acerca de Convertidor PX a REM
Convertir px, rem, em y pt y revisar las sustituciones CSS.
16px: 24px → 1.5rem = 1.5em = 18pt.
font-size:24px → font-size:1.5rem; border:1px → border:1px (≤2px).
Raíz positiva; magnitud ≤1000 millones; seis decimales redondeados. Vista previa limitada a 8–72px. CSS ≤100 000 caracteres. Solo se convierten tokens px sin comillas en valores; se conservan comentarios, cadenas, URL y content. Revise el resultado: conversor léxico limitado, no validador CSS. Los números CSS con exponente (como 1e+3px o 1e-3px) se conservan como tokens completos.
Casos de uso
Cómo usar
Ajuste la raíz, edite una unidad y pegue CSS opcionalmente. ≤2px conserva dimensiones pequeñas; CSV enumera pares numéricos convertidos únicos.
Raíz positiva; magnitud ≤1000 millones; seis decimales redondeados. Vista previa limitada a 8–72px. CSS ≤100 000 caracteres. Solo se convierten tokens px sin comillas en valores; se conservan comentarios, cadenas, URL y content. Revise el resultado: conversor léxico limitado, no validador CSS. Los números CSS con exponente (como 1e+3px o 1e-3px) se conservan como tokens completos.
Consejos Pro
- Raíz positiva; magnitud ≤1000 millones; seis decimales redondeados. Vista previa limitada a 8–72px. CSS ≤100 000 caracteres. Solo se convierten tokens px sin comillas en valores; se conservan comentarios, cadenas, URL y content. Revise el resultado: conversor léxico limitado, no validador CSS. Los números CSS con exponente (como 1e+3px o 1e-3px) se conservan como tokens completos.
- rem = px / tamaño raíz; em supone aquí el mismo contexto que la raíz; pt = px × 0,75 a 96 píxeles CSS por pulgada.
Preguntas frecuentes
Aquí se supone que el contexto em equivale a la raíz. En CSS depende del tamaño de fuente correspondiente y del anidamiento.
Se conservan cadenas, comentarios, funciones URL y content. Revise la hoja de estilo; no se valida CSS complejo o incorrecto.