Conversor de unidades CSS

Funciones

• Once unidades a la vez: px, rem, em, vw, vh, vmin, vmax, pt, in, cm, mm
• Ajusta a qué son relativas las unidades relativas: tamaño de fuente raíz, tamaño actual, ancho y alto del viewport
• Cada fila relativa indica su suposición en línea, para que la suposición nunca se tome por un hecho
• La entrada puede llevar unidad (24px, 1.5rem) o no; sin ella decide el desplegable
• Se entienden los dígitos y signos de ancho completo y las comillas pegadas: vienen del método de entrada, no de ti
• Los resultados se agrupan (unidades relativas, unidades absolutas) y cada fila se copia por separado
• Se calcula en vivo, sin botón de ejecutar; una entrada vacía recurre a una muestra de 24px para que la página nunca quede en blanco

Cómo se usa

1. Escribe un valor en el cuadro, por ejemplo 24px
2. Si solo escribes un número, elige su unidad en el desplegable
3. Ajusta el tamaño de fuente raíz, el actual y el viewport según necesites
4. Lee los resultados y copia cualquier fila

Preguntas frecuentes

¿Por qué no hay una fila de porcentaje?

Porque un porcentaje no tiene un único significado en CSS: el `100%` de un tamaño de fuente significa el tamaño heredado, mientras que un porcentaje en width, height, `padding` o `translate` se resuelve cada uno contra algo distinto (el bloque contenedor, el tamaño del propio elemento, el viewport…). La herramienta no puede saber en qué propiedad acabará este valor, así que cualquier número que imprimiera sería inventado. Para tamaños de fuente la fila `em` es exactamente equivalente (`1em === 100%`), así que las conversiones del día a día no se ven afectadas.

¿Por qué no hay ch, ex, lh ni cqw?

Porque su conversión depende de cosas que esta herramienta no puede ver. `ch` es la anchura del glifo 0 y `ex` la altura de una x minúscula; ambas dependen de las métricas de la fuente en uso; `lh` es la altura de línea actual; `cqw` es relativa al contenedor de consulta más cercano. Ninguna se conoce hasta que el elemento se renderiza de verdad, así que cualquier conversión fuera de línea daría una respuesta errónea de aspecto plausible. Si introduces una de estas unidades, recibes una explicación en vez de un px en silencio.

¿Cuántos píxeles hay en una pulgada?

96, fijados por la especificación CSS y sin relación con la densidad física de píxeles de la pantalla; por eso esta herramienta no pide ninguna «resolución de pantalla». Solo la impresión (con dimensiones físicas reales) necesita la otra conversión, y para eso está una calculadora de PPI. `pt` se deriva de ahí: 72 puntos por pulgada, así que `1pt = 96 ÷ 72 ≈ 1.333px`, y `12pt` son exactamente `16px`.

¿Cuál es la diferencia real entre rem y em?

`rem` es siempre relativo al tamaño de fuente del elemento raíz (`<html>`), así que cambiarlo una vez lo cambia todo; `em` es relativo al tamaño de fuente del elemento actual, que normalmente se hereda del padre, así que el mismo CSS anidado un nivel más profundo da un resultado distinto: eso es a la vez su propósito (escalar con el contexto) y donde sorprende a la gente. Mantenerlos como dos parámetros ajustables separados pretende hacer visible esa diferencia.