Conversor de unidades CSS

¿Qué es Conversor de unidades CSS?

El Conversor de Unidades CSS es una herramienta gratuita que funciona en el navegador y traduce una sola longitud CSS a siete unidades habituales: px, rem, em, pt, %, vw y vh. Desarrolladores front-end y diseñadores web lo usan para pasar un diseño de píxeles absolutos a unidades responsivas, comprobar a qué equivale un rem con un tamaño de fuente raíz personalizado o convertir un valor en pt de estilo impreso a píxeles de pantalla. Como rem depende del tamaño de fuente raíz, em y % dependen del tamaño de fuente del padre, y vw/vh dependen del viewport, el conversor expone los cuatro como ajustes editables. Escribe un valor, elige su unidad de origen y todos los campos de resultado se actualizan a la vez. Un fragmento de CSS listo para pegar lista los siete equivalentes como declaraciones font-size.

Cómo usar Conversor de unidades CSS

1. Abre Ajustes y define el tamaño de fuente raíz (el font-size de html en el que se basa rem), el tamaño de fuente del padre (para em y %) y el ancho y alto del viewport (para vw y vh).
2. Escribe el número que quieres convertir en el campo de valor.
3. Elige la unidad de origen en el desplegable de unidad: px, rem, em, pt, %, vw o vh.
4. Consulta cada equivalente en los campos de resultado etiquetados y de solo lectura; todos se recalculan automáticamente al cambiar el valor, la unidad o cualquier ajuste.
5. Copia el fragmento de CSS generado para pegar los siete equivalentes font-size directamente en tu hoja de estilos.

Ejemplos

Raíz 16px, valor 16, origen px

rem = 1

Raíz 10px, valor 2, origen rem

px = 20

valor 16, origen px

pt = 12

Preguntas frecuentes

¿Entre qué unidades convierte?

Siete unidades de longitud CSS: px, rem, em, pt, %, vw y vh. Cualquiera puede ser la unidad de origen y los siete equivalentes se muestran a la vez.

¿Por qué tengo que definir los tamaños raíz, del padre y del viewport?

Estas unidades son relativas. rem es un múltiplo del tamaño de fuente raíz (html), em y % son relativas al tamaño de fuente del padre, y vw/vh son porcentajes del ancho y alto del viewport. Definirlas en Ajustes le indica al conversor a qué equivale cada unidad relativa.

¿Cómo se trata pt?

CSS define 96px = 1in = 72pt, así que 1pt equivale a 4/3 px y 1px equivale a 0,75pt. El conversor usa esa proporción fija, independiente del tamaño de fuente o del viewport.

¿Qué pasa si un valor o ajuste no es válido?

Si el valor no es un número finito, o si alguno de los tamaños raíz, del padre o del viewport falta, es cero o negativo, los campos de resultado muestran un guion (—) hasta que introduzcas números válidos.

¿Se envía algo a un servidor?

No. Todas las conversiones se ejecutan por completo en el lado del cliente, dentro de tu navegador, sin subidas ni llamadas a ningún servidor, así que los valores que introduces nunca salen de tu dispositivo.