Conversor CSS px ↔ rem
Convierte entre unidades CSS px y rem.
px (Píxeles)
Una unidad absoluta que representa un píxel en la pantalla. Tiene un tamaño fijo y es limitada para el diseño responsivo.
rem (Root EM)
Una unidad relativa basada en el tamaño de fuente del elemento raíz (html). Beneficiosa para la accesibilidad y el diseño responsivo.
Fórmula de Conversión
Recomendaciones de Uso
- • Tamaño de fuente: rem recomendado
- • Espaciado (margin, padding): rem recomendado
- • Borde: px utilizable
- • Media queries: rem recomendado
Guía Completa de Unidades CSS
Elegir las unidades CSS correctas en el desarrollo web afecta enormemente la experiencia del usuario y la accesibilidad. Aprende las diferencias entre px y rem y cómo usarlas en situaciones apropiadas.
📐 Características
- • Unidad absoluta con correspondencia 1:1 a píxeles de pantalla
- • Tamaño consistente en todos los navegadores
- • Control de diseño preciso posible
- • No se ve afectado por la configuración del usuario
✅ Casos de Uso Recomendados
- • Grosor de borde (1px, 2px)
- • Desplazamiento de sombra
- • Tamaños de iconos (16px, 24px)
- • Ajustes de espaciado fino
⚠️ Precauciones
- • Ignora la configuración de tamaño de fuente del usuario
- • Puede causar problemas de accesibilidad
- • Limitado para el diseño responsivo
📐 Características
- • Basado en el tamaño de fuente del elemento raíz (html)
- • Refleja la configuración del usuario
- • Mantiene proporciones consistentes
- • Amigable con la accesibilidad
✅ Casos de Uso Recomendados
- • Configuración de tamaño de fuente
- • Espaciado (margin, padding)
- • Tamaños de contenedores
- • Puntos de quiebre de media queries
💡 Ventajas
- • Mantiene proporciones al escalar
- • Mejora la accesibilidad
- • Fácil mantenimiento
🎯 Estrategia de Uso Específico por Unidad
Tipografía
Usa rem para tamaños de fuente y espaciado de líneas rem
Diseño
Usa rem para espaciado y contenedores rem
Detalles
Usa px para bordes y sombras px
📱 Consejos de Diseño Responsivo
Enfoque Mobile-first
Establece el tamaño de fuente base en 16px y escala con unidades rem
html { font-size: 16px; }
h1 { font-size: 2rem; /* 32px */ }Uso de Media Queries
Mantén la consistencia con puntos de quiebre basados en rem
@media (min-width: 48rem) { /* 768px */ }
html { font-size: 18px; }
}♿ Consideraciones de Accesibilidad
✅ Prácticas Recomendadas
- • Establece tamaños de fuente con unidades rem
- • Mantén un tamaño mínimo de fuente de 16px
- • Espaciado de líneas suficiente (1.5 o más)
- • Objetivo táctil mínimo de 44px
❌ Cosas a Evitar
- • Usar valores px fijos para tamaños de fuente
- • Texto pequeño menor a 12px
- • Anchos de contenedores fijos
- • Espaciado de líneas de 1.0 o menos
🔧 Soporte del Navegador y Compatibilidad
Unidad px
Soporte perfecto en todos los navegadores. Disponible desde IE6+.
Unidad rem
Soporte perfecto en IE9+ y navegadores modernos. Se necesita respaldo para IE8 e inferiores.
Para soporte de IE8: Declara el valor px primero, luego agrega el valor rem como respaldo
font-size: 18px; /* IE8 fallback */
font-size: 1.125rem; /* Modern browsers */