Conversor de Unidades CSS

Acerca de Conversor de Unidades CSS

Introduce un valor en px, rem, em, %, pt, vw o vh y la herramienta lo convierte a la unidad que elijas. Tú defines las referencias: el tamaño de fuente raíz (html) para rem, el tamaño de fuente del padre para em, un tamaño de contenedor para % y el ancho y alto del viewport para vw y vh. Por defecto son 16px, 16px y 100px, y el viewport empieza con el tamaño de tu ventana actual. pt es fijo: 1pt = 4/3px. Un número sin unidad se toma como px.

Cada conversión es una sola multiplicación, pero la referencia que elijas lo cambia todo. Los porcentajes, en particular, se refieren a cosas distintas según la propiedad, y el px, pese a su nombre, no es un píxel físico de la pantalla.

Un píxel CSS es un ángulo, no un punto de la pantalla

La especificación CSS Values and Units define el px mediante un píxel de referencia: el ángulo visual de un píxel en un dispositivo de 96 ppp visto a la distancia de un brazo. Con un brazo nominal de 28 pulgadas, son unos 0,0213 grados. Es decir, el píxel CSS se comporta más como un ángulo que como una longitud. En un televisor que se mira desde el sofá, 1px es físicamente mayor; en un móvil en la mano, menor, y eso es lo que pretende la especificación.

Los navegadores lo aplican mediante la relación de píxeles del dispositivo. En un móvil con relación 3, un píxel CSS se dibuja con un bloque de 3×3 píxeles físicos. Como la especificación fija 1in = 96px y 1in = 2,54cm, escribir 1cm en CSS normalmente no mide un centímetro exacto si pones una regla sobre la pantalla.

rem frente a em: qué se multiplica

rem es relativo al font-size del elemento raíz. em es relativo al font-size del propio elemento, salvo dentro de la propiedad font-size, donde se refiere al del padre. El campo de tamaño de fuente del padre cubre ese caso habitual.

em se acumula al anidar. Una lista con font-size: 1.2em anidada tres niveles termina en 16 × 1,2 × 1,2 × 1,2 ≈ 27,6px. rem siempre mira la raíz, así que no se acumula. Por otro lado, em es justo lo que conviene para el relleno de un botón: si el texto crece, el relleno crece con él.

El argumento más fuerte a favor de rem es la accesibilidad. Si una persona sube el tamaño de letra predeterminado del navegador de 16px a 20px, el texto en rem se adapta y el fijado en px no. El truco html { font-size: 62.5% }, que hace que 1rem sea 10px, sigue respetando ese ajuste porque es un porcentaje del valor del usuario.

Porcentaje, ¿de qué?

La herramienta calcula el % respecto a un único tamaño de contenedor. En CSS real la referencia depende de la propiedad, así que decide qué número va en ese campo:

• width, left, right: ancho del bloque contenedor
• height: alto del bloque contenedor (si no está definido, se comporta como auto)
• padding y margin: el ancho del bloque contenedor, incluso arriba y abajo
• font-size: el tamaño de fuente del padre (150 % equivale a 1.5em)
• line-height: el tamaño de fuente del propio elemento
• transform: translate(): la caja del propio elemento

Puntos y unidades de impresión

La especificación fija 1pt = 1/72in, 1pc = 1/6in y 1in = 96px, así que 1pt = 4/3px y 12pt = 16px. Por eso un cuerpo de 12 puntos en un procesador de textos coincide con los 16px predeterminados de la web. Elige pt como unidad (o escribe 12pt) y la herramienta lo convierte directamente a px o rem.

Ejemplos

Cómo se usa

1. Ajusta la fuente raíz, la fuente del padre, el tamaño del contenedor y el ancho/alto del viewport a tus valores reales.
2. Introduce un valor con su unidad (sin unidad se toma como px).
3. Elige la unidad de destino y lee o copia el resultado, mostrado con hasta cuatro decimales.

Preguntas frecuentes