Conversor de Unidades CSS
Convierte unidades de longitud CSS —px, rem, em, pt y %— en vivo en tu navegador. Define un tamaño de fuente raíz y cada unidad se actualiza al instante.
Cada conversión se calcula localmente en tu navegador; los valores que escribes nunca se suben.
¿Trabajas con colores CSS? Prueba el Conversor de Colores CSS.
Acerca de Conversor de Unidades CSS
Este conversor de unidades CSS convierte una longitud que escribes en una unidad a todas las demás unidades CSS a la vez: px, rem, em, pt y %. Introduce un valor en cualquier campo y los otros se actualizan en vivo, así que puedes leer un resultado de px a rem o de pt a px sin hacer la cuenta a mano. Un campo de tamaño de fuente raíz (16px por defecto) controla las relaciones de rem, em y %, lo que refleja cómo los navegadores resuelven las unidades relativas respecto al tamaño de fuente de la página. Una referencia rápida integrada muestra los valores comunes de px a rem que más reutilizan las personas diseñadoras —12, 14, 16, 24, 32 y más— con tu base elegida. Cada resultado tiene un botón de copiar para que lo lleves directo a una hoja de estilos. Todo se ejecuta en tu navegador, así que los valores que escribes permanecen en tu dispositivo.
Características
- Convierte entre px, rem, em, pt y % en cuanto escribes en cualquier campo
- Un tamaño de fuente raíz configurable controla rem, em y % para que los resultados coincidan con tu CSS
- Conversión precisa de pt usando el factor CSS 96/72 (1pt = 1.3333px)
- Trata % como una fracción del tamaño de fuente raíz, igual que el CSS relativo a la fuente
- Tabla de referencia rápida de valores comunes de px a rem (12, 14, 16, 24, 32) con tu base
- Recorta los resultados a una precisión razonable y elimina ceros finales para valores limpios
- Copia en un clic en cada unidad, con el sufijo de la unidad incluido
- Recuerda tu último valor y tamaño de fuente base entre visitas
Cómo usar Conversor de Unidades CSS
- Define el tamaño de fuente raíz si difiere del valor predeterminado del navegador de 16px.
- Escribe un valor en cualquier campo de unidad: px, rem, em, pt o %.
- Lee el valor equivalente en cada una de las otras unidades mientras se actualiza en vivo.
- Haz clic en el botón de copiar junto a una unidad para obtener el valor con su sufijo.
- Usa la tabla de referencia rápida para los pares comunes de px a rem con tu base.
Ejemplo
Entrada
/* root font-size: 16px */
.card { padding: 24px; }
Salida
.card { padding: 1.5rem; }
/* 24px = 1.5rem = 18pt = 150% at base 16px */
Con una base de 16px, 24px equivale a 1.5rem, útil para pasar un diseño a rem.
Errores comunes y solución de problemas
- Tus resultados de rem y % parecen incorrectos aunque px esté bien. — Revisa el tamaño de fuente raíz. rem, em y % se resuelven respecto a esa base, así que defínela para que coincida con el font-size de tu elemento :root o html.
- pt no coincide con lo que ves en una herramienta de diseño. — Este conversor usa la definición de CSS donde 1pt = 96/72 px (1.3333px). Las herramientas de impresión o autoedición pueden asumir 72dpi, lo que da 1pt = 1px en su lugar.
- em y rem muestran el mismo número, pero esperabas que difirieran. — El conversor usa una sola base para ambos para simplificar. En CSS real, em es relativo al tamaño de fuente del propio elemento mientras que rem es relativo a la raíz, así que solo divergen cuando un elemento padre cambia el font-size.
- Los campos se vacían cuando dejas el tamaño de fuente raíz en blanco. — Una base vacía o cero se trata como inválida; el conversor recurre a 16px. Escribe un número positivo para controlar tú mismo rem, em y %.
Preguntas frecuentes
- ¿Cómo convierto px a rem?
- Escribe el valor en píxeles en el campo px y lee el campo rem. rem es el valor dividido entre el tamaño de fuente raíz, así que con la base predeterminada de 16px, 16px es 1rem y 24px es 1.5rem.
- ¿Cómo convierto rem a px?
- Escribe el valor en el campo rem y lee px. De rem a px es el valor multiplicado por el tamaño de fuente raíz, así que 2rem con una base de 16px son 32px.
- ¿Qué tamaño de fuente base usa el conversor?
- Usa 16px por defecto, el tamaño de fuente raíz estándar del navegador, y puedes cambiarlo en el campo Tamaño de fuente raíz. Esa base controla cada resultado de rem, em y % para que coincidan con tu hoja de estilos.
- ¿Por qué aquí 1pt equivale a 1.3333px?
- CSS define 1pt como 1/72 de pulgada y 1px como 1/96 de pulgada, así que 1pt = 96/72 px = 1.3333px. Por eso 12pt se convierte exactamente en 16px, el tamaño común del texto de cuerpo.
- ¿Cuál es la diferencia entre em y rem?
- rem es relativo al tamaño de fuente raíz, mientras que em es relativo al tamaño de fuente del propio elemento. Esta herramienta usa una sola base para ambos por simplicidad, así que dan el mismo valor; define el tamaño de fuente raíz para modelar el lado de rem.
- ¿La conversión se realiza en un servidor?
- No. La conversión de unidades CSS se ejecuta por completo en tu navegador con aritmética simple, así que los valores que introduces permanecen en tu dispositivo.
Herramientas relacionadas
Todas las herramientas de ArrayKit