Conv. de unidades CSS

Convertir entre unidades CSS como px, em, rem, %, vw, vh y más con soporte de puntos de ruptura responsivos

Instrucciones de uso

🚀 Inicio rápido

  • Introducir valor y unidad: p. ej., 16 + px o 1 + rem
  • Configurar contexto: raíz/padre (tamaño de fuente), tamaño de viewport y DPI (afecta rem/em/vw/vh/pt/cm, etc.)
  • 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

📌 Casos 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

CSS Unit Converter - px em rem vw vh pt Calculator - CrateX.app