¿Necesitas convertir unidades CSS para tu diseño web responsivo? Este convertidor de unidades CSS te permite transformar valores entre píxeles (px), em, rem y porcentajes (%). Perfecto para desarrolladores frontend que buscan crear diseños accesibles, escalables y responsivos.
✓ Conversión en tiempo real ✓ Calculadora rápida px/rem/em ✓ Vista previa visual ✓ Tabla de referencia ✓ Ajuste de tamaño base (root y padre)
Convierte entre unidades CSS: píxeles (px), em, rem y porcentajes (%). Ideal para diseños responsivos y accesibles.
* 1rem = 16px (tamaño base del navegador) | 1em = relativo al elemento padre
0px0em0rem0%Elemento de ejemplo
Tamaño actualwidth: 100px; height: 100px;
| px | rem | em | % |
|---|---|---|---|
| 8px | 0.5rem | 0.5em | 50% |
| 10px | 0.625rem | 0.625em | 62.5% |
| 12px | 0.75rem | 0.75em | 75% |
| 14px | 0.875rem | 0.875em | 87.5% |
| 16px | 1rem | 1em | 100% |
| 18px | 1.125rem | 1.125em | 112.5% |
| 20px | 1.25rem | 1.25em | 125% |
| 24px | 1.5rem | 1.5em | 150% |
| 32px | 2rem | 2em | 200% |
| 48px | 3rem | 3em | 300% |
Unidad absoluta. 1px = 1 píxel en pantalla. No escala con el tamaño de fuente.
Relativa al tamaño de fuente del elemento padre. 1em = tamaño de fuente del padre.
Relativa al tamaño de fuente raíz (<html>). 1rem = 16px por defecto.
Porcentaje relativo al contenedor padre. Ideal para layouts responsivos.
rem para tamaños de fuente y espaciados para mejor accesibilidad. Usa em para elementos que deben escalar con su contexto.
No hay conversiones guardadas
px es una unidad absoluta (1 píxel en pantalla). em es relativa al tamaño de fuente del elemento padre. rem es relativa al tamaño de fuente raíz (<html>). rem es más predecible y recomendado para accesibilidad.
Usar rem mejora la accesibilidad porque respeta las preferencias de zoom del usuario. Si un usuario aumenta el tamaño de fuente en su navegador, los elementos en rem escalarán proporcionalmente.
Divide el valor en px entre el tamaño base (normalmente 16px). Ejemplo: 32px ÷ 16px = 2rem. Este convertidor lo hace automáticamente por ti.
Usa rem para tamaños globales (fuentes, márgenes, paddings) para mantener consistencia. Usa em para componentes que necesitan escalar proporcionalmente con su contexto (ej: botones dentro de un contenedor con fuente más grande).
Para layouts responsivos usa combinación de rem (tipografía), porcentajes (%) (anchuras), vw/vh (viewport) y media queries. Flexbox y CSS Grid también son esenciales.