Convierta px a rem, em, pt, picas, pulgadas y mm usando el tamaño de fuente raíz, el del elemento padre y los DPI. CSS establece 1 in = 96 px = 72 pt.
Por AdminRedactado con herramientas de redacción con IAActualizado Ejemplos verificados: 7
24px equivale a 1.5rem con una fuente raíz de 16 px y 96 píxeles por pulgada.
| Unidad | Valor | Definición |
|---|---|---|
| Píxeles (px) | 24px | 1 px |
| Puntos (pt) | 18pt | 1 pt = 1/72 in |
| Picas (pc) | 1.5pc | 1 pc = 12 pt = 1/6 in |
| Pulgadas (in) | 0.25in | 1 in = DPI px |
| Centímetros (cm) | 0.635cm | 1 cm = 1/2.54 in |
| Milímetros (mm) | 6.35mm | 1 mm = 1/25.4 in |
| Cuartos de milímetro (Q) | 25.4Q | 1 Q = 0.25 mm |
| em (fuente del padre) | 1.5em | 1 em = tamaño de fuente del padre |
| rem (fuente raíz) | 1.5rem | 1 rem = tamaño de fuente raíz |
| Porcentaje de la fuente del padre (%) | 150% | 100 % = tamaño de fuente del padre |
1 px
1 rem = tamaño de fuente raíz
CSS relaciona las longitudes mediante píxeles. Las unidades absolutas mantienen proporciones fijas: 1 in = 2.54 cm = 96 px = 72 pt = 6 pc; 1 Q es un cuarto de milímetro. Las unidades relativas dependen de la página: 1 rem es el tamaño de fuente del elemento raíz y, al definir font-size, 1 em (o 100 %) es el tamaño de fuente del padre. El conversor lleva el valor a píxeles y lo divide entre los píxeles de una unidad de destino.
En desarrollo web sirve para pasar un diseño de píxeles a rem y respetar el tamaño de fuente elegido por el lector. Con una raíz de 16 px, 24 px equivale a 1.5 rem. Para impresión, el campo de píxeles por pulgada permite calcular píxeles físicos: a 300 DPI, un logotipo de 10 mm necesita unos 118 píxeles. Para seguir esa preferencia, el tamaño raíz también debe respetarla.
Una pulgada CSS no tiene por qué coincidir con la medida en pantalla. CSS define 96 px por pulgada y el píxel de referencia tiene un ángulo visual de unos 0.0213°. Las implementaciones pueden anclar unidades absolutas a medidas físicas o píxeles; el mapeo, la distancia de observación y la escala de impresión influyen en la correspondencia con una regla.
En la fórmula, xₛ y xₜ son los valores de origen y destino; pₛ y pₜ, los píxeles por unidad de origen y destino. Estos factores utilizan los tamaños de fuente y la densidad de píxeles introducidos.
Selecciona la unidad original en De, la unidad deseada en A y escribe el número en Valor. El conversor CSS expresa una longitud del modelo utilizando los tamaños de letra y la densidad de píxeles que introduzcas. El ejemplo inicial convierte 24 px en 1,5 rem, con un tamaño de letra raíz de 16 px.
Las diez opciones son px, pt, pc, in, cm, mm, Q, em, rem y porcentaje del tamaño de letra del elemento padre. El tamaño de letra raíz para rem aparece entre los campos principales. Los campos avanzados permiten cambiar el tamaño del padre para em y % y los píxeles por pulgada, con ajustes de 96, 300 y 72.
Valor admite un número o una expresión aritmética. Elige la unidad en De. Intercambiar De y A conserva Valor y los campos de contexto: al intercambiar el ejemplo inicial, convierte 24 rem a px y produce 384 px con la misma raíz. Restablecer recupera tanto las unidades como los tamaños de letra y la densidad originales.
Primero se calcula el valor en píxeles y después se divide entre los píxeles de una unidad de destino. En el modelo CSS de 96 píxeles por pulgada, 1 in = 96 px = 72 pt = 6 pc. Una pulgada contiene 2,54 cm o 25,4 mm; una Q equivale a un cuarto de milímetro.
Por ejemplo, 12 pt × 96/72 = 16 px. A la inversa, 16 px × 72/96 = 12 pt. Las relaciones absolutas se recogen en CSS Values and Units del W3C. Un píxel CSS y un píxel físico de pantalla son conceptos distintos; esta aritmética no mide una pantalla con una regla.
El formulario no inspecciona los estilos calculados de tu página, el zoom del navegador ni la relación de píxeles del dispositivo. Introduce el contexto que corresponda a tu cálculo. Los valores de raíz y padre son ajustes del ejemplo, no requisitos invariables que todos los documentos CSS deban cumplir.
La tabla utiliza el contexto indicado en cada fila y redondea decimales largos a seis posiciones. El valor convertido y la salida numérica de píxeles utilizan diez cifras significativas. El texto de código CSS y las cadenas de la tabla de unidades utilizan ocho.
| Valor | De | A | Contexto | Valor convertido |
|---|---|---|---|---|
| 24 | px | rem | raíz de 16 px | 1,5 |
| 24 | px | rem | raíz de 20 px | 1,2 |
| 12 | pt | px | 96 píxeles/in | 16 |
| 1 | pc | pt | 96 píxeles/in | 12 |
| 100 | % | em | padre de 16 px | 1 |
| 10 | mm | px | 300 píxeles/in | 118,110236 |
Con raíz de 20 px, 24 px = 24/20 = 1,2 rem. Con padre de 18 px, 1,5 em = 27 px en el contexto de tamaño de letra de este formulario. Si la raíz sigue en 16 px, esos 27 px son 1,6875 rem. Los campos de contexto pueden cambiar la respuesta aunque se conserve el número original.
rem se refiere al tamaño de letra del elemento raíz. En esta página, em y % modelan un tamaño de letra relativo al del padre. Así, 150 % con un padre de 20 px equivale a 30 px. Por su parte, 1,5 rem con raíz de 16 px equivale a 24 px.
En CSS, em utilizado en una propiedad distinta de font-size se refiere al tamaño de letra calculado del propio elemento. La base de un porcentaje también depende de la propiedad: un ancho porcentual no utiliza el tamaño de letra del padre. Aplica la opción de porcentaje de esta calculadora al modelo de tamaño de letra que describe.
El anidamiento puede cambiar un tamaño basado en em, porque el tamaño calculado de cada padre se convierte en el contexto siguiente. El formulario modela una conversión con el tamaño de padre introducido. No recorre un árbol de elementos ni interpreta sus reglas de herencia. Para rem, conserva la raíz adecuada al comparar varias conversiones.
CSS fija la relación absoluta en 96 px por pulgada. Elegir 300 o introducir otra densidad positiva hace que esta calculadora interprete px como píxeles físicos a esa densidad. Con 300, una pulgada requiere 300 píxeles físicos. Eso no modifica la definición que CSS utiliza para una pulgada en el navegador.
Para 10 mm a 300 píxeles por pulgada, 10/25,4 × 300 = 118,110236… píxeles físicos. El formulario avisa de esa interpretación. La salida de código sigue añadiendo el sufijo de unidad, por lo que conviene conservar el contexto del cálculo. Vuelve a 96 para utilizar los factores absolutos estándar de CSS.
La densidad personalizada no detecta automáticamente el zoom ni la relación de píxeles del dispositivo. Los tamaños de raíz y padre mantienen el contexto que escribiste; elegir otra densidad tampoco descubre nuevos tamaños de letra ni los vuelve a escalar por su cuenta. Son datos independientes dentro del modelo proporcionado.
La salida de CSS añade el sufijo a un número con ocho cifras significativas y utiliza la sintaxis numérica de CSS, con punto decimal. Por ejemplo, un resultado mostrado como 1,5 rem se escribe 1.5rem en código. La salida de píxeles intermedios se omite si el destino principal ya es px. La tabla desplegable compara las diez unidades y sus reglas.
Raíz, padre y densidad deben ser positivos. Valor puede ser cero o tener signo, aunque una cifra negativa no sea válida para todas las propiedades CSS. No hay unidades de ventana, unidades de interlineado ni una base porcentual general. El resultado convierte el modelo introducido; no determina por sí solo la accesibilidad de un diseño.
Fuente de comprobación: Comprobación del ejemplo: CSS Values 3 §6.1; 1rem = tamaño de fuente raíz (16 px habitual en el navegador); 24 / 16 = 1.5
Fuente de comprobación: Comprobación del ejemplo: CSS Values 3 §6.2; 1pt = 1/72 in, 1in = 96px; 12 × 96/72 = 16
Fuente de comprobación: Comprobación del ejemplo: CSS Values 3 §6.2; 1in = 96px
Fuente de comprobación: Comprobación del ejemplo: 1 rem = tamaño de fuente raíz (16 px); 1.5 × 16
Normalmente 16 píxeles con la configuración inicial. Un rem equivale al tamaño de fuente del elemento raíz html. Los navegadores principales suelen usar 16 px, salvo que el lector o la hoja de estilos cambien ese valor. Con una base de 16 px, html { font-size: 62.5% } hace que 1 rem sea 10 px. La especificación CSS Values and Units del W3C define rem; 16 px es una configuración habitual del navegador, no una exigencia de la especificación.
Multiplica los píxeles por 0.75. Para pasar de puntos a píxeles, multiplica por 4/3, aproximadamente 1.333. Ambos factores proceden de la relación CSS del W3C: 1 in = 96 px = 72 pt; por tanto, 1 px = 72/96 pt. Un texto de 16 px equivale a 12 pt, y uno de 11 pt a unos 14.67 px.
rem siempre se refiere al tamaño de fuente del elemento raíz. em se refiere al tamaño de fuente del elemento actual, o al del padre cuando se usa para definir font-size. Por eso em puede acumularse al anidar elementos: dos niveles a 1.2em producen un factor de 1.44 respecto al tamaño de fuente compartido anterior a ambos niveles. En cambio, 1.2rem permanece en 19.2 px con una raíz de 16 px, independientemente de la profundidad.
Usa rem si el texto debe seguir la preferencia de tamaño de fuente del lector y configura la raíz para que también la respete. El zoom de página amplía tanto px como rem, pero la preferencia de fuente afecta a rem, em y porcentajes cuando la raíz la respeta. El criterio WCAG 2.1 1.4.4, nivel AA, exige que el texto pueda ampliarse al 200 % sin perder contenido ni funcionalidad. El zoom puede cumplirlo con px; rem también permite respetar la preferencia de fuente.
Una pulgada CSS no tiene por qué coincidir con la medida en pantalla. CSS define 1 in = 96 px. El píxel de referencia W3C es el de una pantalla de 96 DPI vista a 28 in, con un ángulo de unos 0.0213°. Las implementaciones pueden anclar unidades absolutas a medidas físicas o a píxeles. El mapeo del dispositivo y la distancia varían: una caja de 96 px puede medir menos que una pulgada física en un teléfono. Al imprimir a tamaño real, 1 in = 25.4 mm puede coincidir con una regla; la escala y la calibración de impresión también influyen.
Esta calculadora incluye 7 ejemplos resueltos con respuestas de fuentes independientes. Forman parte del conjunto de pruebas y también puedes ejecutarlos aquí.