Conversor de Unidades CSS
Convierte px, rem, em, %, vw y vh en tiempo real. Ajusta la fuente base y copia cada valor.
Referencia viewport: 1920×1080 px para equivalencias de vw y vh.
¿Qué es Conversor de Unidades CSS y para qué sirve?
El conversor de unidades CSS traduce valores entre px, rem, em, porcentaje, vw y vh con fuente base configurable —típicamente 16 px—. Desarrolladores frontend lo emplean al migrar diseños fijos a responsive, documentar sistemas de diseño y mantener consistencia entre componentes que usan distintas unidades relativas. Evita errores de redondeo al mostrar equivalencias precisas con varios decimales cuando es necesario.
¿Cómo se calcula / Cómo funciona?
La conversión normaliza a píxeles usando contexto: rem multiplica por font-size del root; em por font-size del elemento padre; % según propiedad —width respecto al contenedor—; vw y vh respecto al viewport. Al cambiar un valor, todas las unidades equivalentes se recalculan. Puede copiar cada resultado individualmente. Ideal para documentar tokens de diseño en design systems con múltiples unidades.
Ejemplos prácticos de uso
- Un desarrollador convierte 24 px a 1,5 rem con base 16 px para tipografía de encabezados en Tailwind.
- Un diseñador traduce ancho de 50 vw a píxeles equivalentes en viewport de 1440 px para revisión con cliente.
Preguntas Frecuentes (FAQ)
¿Qué font-size base usa rem? Por defecto 16 px, estándar de navegadores. Si su proyecto define html { font-size: 62.5% }, cambie la base a 10 px en la herramienta.
¿em y rem son intercambiables? No. rem es relativo al root; em al padre inmediato y se compone en elementos anidados. Para escalado global, prefiera rem.