Convertidor de Unidades CSS

Admite la conversión entre unidades CSS como px, em, rem, %, vw, vh, proporcionando configuraciones de puntos de interrupción responsivos. Calcula automáticamente valores dependientes del contexto, adecuado para el desarrollo de diseños responsivos, implementación frontend y adaptación de estilos.

Instrucciones de uso

🚀 Inicio rápido

Introducir valor y unidad: p. ej., 16 + px o 1 + rem
Seleccione la unidad de Origen e introduzca el valor; luego elija la de Destino. Use “Intercambiar” para cambiar rápido.
Móvil: use la flecha superior derecha del cajón para alternar Origen/Destino.
Disponible para rem/em/%/vw/vh; deshabilitado en unidades absolutas.
Ver resultados: el resto de unidades se calculan al instante y pueden copiarse
Puntos de ruptura: alternar móvil/tableta/escritorio para validar en distintas pantallas

📌 Escenarios comunes

Usos: maquetación adaptable, traspaso diseño‑desarrollo, correlación densidad/impresión, unificación de convenciones

🧭 Consejos de uso

Base: 16px en raíz es común y facilita el cálculo mental rem ↔ px
Texto en rem: favorece el escalado global y la accesibilidad; em para escalado local en componentes
Maquetación con viewport: combinar con breakpoints y límites (clamp/min/max) para evitar extremos
Decimales y redondeo: mantén precisión razonable para no perder legibilidad

🎛️ Parámetros y contexto

REM base (Root Font Size): determina la conversión rem ↔ px. 16px es común (1rem≈16px). Ajusta cuando la base del diseño sea distinta.
EM base (Parent Font Size): determina em y % (cuando la referencia es Tamaño de fuente). Útil para escalado local de componentes.
Referencia de %: elige Tamaño de fuente / Ancho / Alto según el contexto (maquetación vs tipografía).
Presets de breakpoint: también fijan el tamaño de viewport para estimar rápidamente (no es una media query en tiempo de ejecución).
Tamaño de viewport para vw/vh/vmin/vmax y % (ancho/alto). Los dispositivos reales varían por barras, safe areas y barras de desplazamiento.
DPI (puntos por pulgada): para pt/pc/in/cm/mm/q ↔ px. Por defecto 96; para impresión/HiDPI configura el valor del dispositivo.
Consejos: 1) usa 16px y 96 DPI como base; 2) valida porcentajes de layout cambiando breakpoints; 3) son estimaciones de diseño, no la computación final del navegador.

⚠️ Limitaciones y compatibilidad

% depende de la propiedad (width/height/line-height difieren); esta herramienta estima casos comunes
ex/ch dependen de métricas tipográficas; varían entre fuentes/navegadores
Las unidades de viewport varían con barras/zonas seguras; puede haber pequeñas discrepancias
Unidades físicas ↔ px varían con el DPI; en impresión/HiDPI, validar

🔒 Privacidad y seguridad

Todo el procesamiento se realiza en tu navegador; los datos no salen de tu dispositivo

❓ Preguntas frecuentes

¿Diferencia entre rem y em?

rem depende de la fuente raíz (escalado global predecible); em depende del padre (ideal para escalado local)

¿Usar px o rem?

Prioriza rem en maquetación y texto (a11y); px es apropiado para iconos/bordes nítidos

¿Por qué vw/vh se comportan distinto según el dispositivo?

Barras de dirección y áreas seguras móviles afectan el viewport; combina con clamp()/min()/max() y breakpoints

¿Cómo convertir píxeles de pantalla a unidades de impresión?

Ajusta DPI (p. ej., 96/72/300). Pantalla→impresión aquí es estimativa; usa pruebas y flujos con ICC