Conversor de PX a REM
Convierte longitudes CSS entre px, rem, em, pt y otras unidades. rem y em dependen de un tamaño de fuente base, así que escribes la base con la que convertir.
Cómo se convierten las unidades CSS
Las unidades absolutas de CSS (px, pt, pc, in, cm, mm, Q) están definidas en la especificación CSS Values and Units del W3C, de este modo.
| Unidad | Definición | En px |
|---|---|---|
| in (pulgada) | 1in = 2,54cm = 96px | 96 px |
| px (píxel) | 1px = 1/96 in | 1 px |
| pt (punto) | 1pt = 1/72 in | 4/3 px (aprox. 1,3333 px) |
| pc (pica) | 1pc = 1/6 in (12pt) | 16 px |
| cm (centímetro) | 1in = 2,54cm | aprox. 37,7953 px |
| mm (milímetro) | 1cm = 10mm | aprox. 3,77953 px |
| Q (cuarto de milímetro) | 1Q = 1/40 cm | aprox. 0,944882 px |
El cálculo usa fracciones exactas. Un valor que no se divide exactamente (como cm, mm o Q en px) se etiqueta como «valor redondeado».
rem y em dependen de un tamaño de fuente base
- rem es relativo al font-size del elemento raíz (
html). Con una base de 16px, 1rem = 16px. Si estableceshtml { font-size: 62.5% }, la base pasa a ser 10px (cuando el valor por defecto del navegador es 16px), y 1,6rem = 16px. - em es relativo al font-size del elemento en el que se usa. La excepción es la propia propiedad
font-size: cuando em se usa enfont-size, se refiere al font-size heredado del elemento padre (esto es lo que dice la especificación del W3C). En propiedades comopaddingymargin, em se refiere al font-size del propio elemento. - Los valores em anidados (por ejemplo, 1,2em dentro de otro 1,2em, que se multiplican hasta 1,44) no se calculan aquí. Escribe como base el font-size calculado (real).
El valor inicial de 16px es solo un valor por defecto cómodo. Esta herramienta convierte con la base (en px) que escribas, y una base distinta da un resultado rem o em distinto.
Un píxel CSS no es un píxel de pantalla
Un px de CSS no es un píxel físico de una pantalla (un píxel del dispositivo). Es un píxel de referencia definido como 1/96 de pulgada. En una pantalla de alta densidad, un píxel CSS se puede dibujar con varios píxeles del dispositivo (por ejemplo, 2 × 2).
Ejemplos
- 16px = 1rem = 1em = 12pt (con una base de 16px)
- 24px = 2,4rem (con una base de 10px)
- 1,6rem = 16px (con una base de 10px)
- 1in = 96px = 72pt = 6pc = 2,54cm
- 10mm ≈ 37,79528px
- 0,75pt = 1px
Notas
- Las unidades que dependen del tamaño de la pantalla, del tamaño del padre o de la forma de la fuente (vw, vh, %, ch, ex, etc.) no se pueden convertir solo con un número, así que no se incluyen.
- El valor puede tener hasta 12 cifras antes de la coma decimal y 6 decimales, y puede ser negativo (CSS tiene longitudes negativas, como
margin: -10px). Una base debe ser mayor que 0. Usa la coma o el punto como separador decimal; los millares, con un espacio. Un separador seguido de exactamente tres cifras (1,234 o 1.234) es ambiguo y se rechaza. - Los resultados se muestran con 7 cifras significativas. Puedes copiar el valor tal como se muestra o con 15 cifras significativas.
Fuentes
- W3C, CSS Values and Units Module Level 3: las definiciones de las unidades de longitud absolutas y de em y rem (comprobadas el 31 de octubre de 2026; la página era el borrador de Candidate Recommendation del 22 de marzo de 2024). Indica que rem es el tamaño de fuente del elemento raíz y que em es el font-size calculado del elemento, o el del padre cuando se usa en la propiedad
font-size.
Preguntas frecuentes
¿Cuántos px son 1rem?
Depende del font-size del elemento raíz (html). Con una base de 16px son 16px, pero si cambia el font-size de html, cambia también el tamaño de 1rem. Escribe tu base para convertir.
¿Debo usar px o pt?
px y rem son habituales en pantallas. pt se usa más en CSS para impresión. Como 1pt = 4/3 px, 12pt son 16px.
¿Qué diferencia hay entre em y rem?
rem es relativo al font-size del elemento raíz, así que tiene el mismo tamaño dondequiera que lo uses. em es relativo al font-size del lugar donde se usa, así que los elementos anidados pueden cambiar su tamaño.