Convertidor de unidades CSS

Convertidor de unidades CSS - Calculadora de px, rem, em, %

🎨 Convierte entre unidades CSS: píxeles (px), rem, em, porcentajes (%), puntos (pt) y unidades de viewport (vw, vh). Herramienta esencial para diseño y desarrollo web responsive.

Tipos de unidades CSS

• Unidades absolutas: px, pt, cm, mm, in - tamaño fijo sin importar el contexto
• Unidades relativas: rem, em, %, vw, vh - escalan según el padre o el viewport
• Relativas a la fuente: rem, em, ch, ex - basadas en el tamaño de fuente
• Relativas al viewport: vw, vh, vmin, vmax - basadas en las dimensiones del viewport

Explicación de unidades

• px (píxeles): 1px = 1 píxel del dispositivo. Unidad absoluta, precisa pero no escalable.
• rem: Relativo al elemento raíz (html). 1rem = 16px por defecto.
• em: Relativo al tamaño de fuente del padre. Puede acumularse en elementos anidados.
• %: Relativo a la propiedad del elemento padre. 100% = igual que el padre.
• pt (puntos): Unidad de impresión. 1pt = 1/72 de pulgada ≈ 1.333px.
• vw: 1vw = 1% del ancho del viewport. 100vw = ancho completo.
• vh: 1vh = 1% de la altura del viewport. 100vh = altura completa.

Conversiones comunes

• 1rem = 16px (configuración por defecto del navegador)
• 1em = 16px (si el padre es 16px)
• 100% = tamaño del elemento padre
• 12pt = 16px (común en impresión)
• 1vw = 19.2px (en un viewport de 1920px)

Método 62,5%

Establece html { font-size: 62.5%; } para que 1rem = 10px. Esto simplifica cálculos: 1.6rem = 16px, 2.4rem = 24px, etc.

Consideraciones de accesibilidad

• Usa rem para fuentes: respeta las preferencias de tamaño de fuente del usuario
• Evita px para fuentes: no escala con la configuración del usuario
• Usa unidades relativas: hace los diseños accesibles al zoom/aumentos
• Prueba con diferentes tamaños: revisa con 200% de zoom y ajustes de texto grande

Diseño responsive

Usa rem en media queries: @media (min-width: 48rem) en lugar de 768px. Esto asegura que los breakpoints escalen con las preferencias de tamaño de fuente del usuario.

💡 Consejo pro: La mejor práctica moderna es usar rem para la mayoría de tamaños (fuentes, espaciado, breakpoints), px para bordes y detalles finos, y % o unidades de viewport para layouts. Evita em para espaciado porque puede acumularse de forma inesperada.