¿Qué es el Convertidor de Unidades CSS?

El Convertidor de Unidades CSS te ayuda a convertir al instante entre las unidades de longitud CSS más comunes: px, rem y em. Ya sea que estés construyendo un sitio web responsivo o migrando de unidades basadas en píxeles a unidades relativas, esta herramienta hace que las matemáticas sean sencillas.

¿Por Qué Convertir Unidades CSS?

El desarrollo web moderno favorece unidades relativas como rem y em sobre píxeles fijos. Las unidades relativas se adaptan a las preferencias del usuario y tamaños de pantalla, mejorando la accesibilidad y el diseño responsivo. Convertir entre unidades asegura que tus diseños se vean consistentes mientras permanecen flexibles.

Buena Práctica: Usar unidades relativas (rem/em) en lugar de píxeles fijos crea sitios web más accesibles que respetan las preferencias de tamaño de fuente del usuario y se escalan mejor en diferentes dispositivos.

Entendiendo las Unidades

px (Píxeles)

Una unidad absoluta que representa un píxel del dispositivo. Proporciona dimensionamiento preciso y fijo para elementos como bordes y sombras.

rem (Root EM)

Relativo al tamaño de fuente del elemento raíz (generalmente la etiqueta <html>). Ideal para escalado consistente en toda tu página.

em (EM)

Relativo al tamaño de fuente del elemento padre. Útil para dimensionamiento a nivel de componente, pero ten cuidado — los valores em se componen cuando los elementos están anidados.

Table of Contents

1. ¿Qué es el Convertidor de Unidades CSS?
- 1.1. ¿Por Qué Convertir Unidades CSS?
- 1.2. Entendiendo las Unidades
2. Cómo Usar el Convertidor de Unidades CSS
3. Características
4. Preguntas Frecuentes

Cómo Usar el Convertidor de Unidades CSS

Conversión Rápida (Página Principal)

Establece tu tamaño de fuente base

El predeterminado es 16px (tamaño predeterminado estándar del navegador). Cámbialo para que coincida con el font-size raíz de tu proyecto.

Elige la unidad de entrada

Haz clic en px, rem o em en las pestañas de unidades.

Ingresa un valor

Escribe cualquier número y ve todas las conversiones actualizarse al instante.

Copia un resultado

Haz clic en el botón copiar junto a cualquier resultado para copiar el valor con su unidad (por ejemplo, "1.5rem").

Conversión Enfocada (Sub-Aplicaciones)

Elige un par de conversión

Selecciona PX → REM, REM → PX o PX → EM de las pestañas de sub-aplicaciones.

Ingresa un valor en cualquier campo

Ambos campos son entradas, así que puedes escribir en el campo "desde" o "hacia".

Intercambia la dirección

Haz clic en el botón intercambiar para invertir la conversión (navega a la sub-aplicación opuesta).

Personaliza la Configuración

Tamaño de Fuente Base

Afecta los cálculos de rem. Establécelo al valor html { font-size: ... } de tu proyecto.

Tamaño de Fuente del Padre

Se muestra para conversiones em. Establécelo al font-size del elemento padre en tu contexto CSS.

Decimales

Controla la precisión de salida de 1 a 6 decimales.

Guardado Automático: Toda la configuración se guarda automáticamente y se comparte entre la página principal y las sub-aplicaciones.

Características

Conversión Principal

Resultados en tiempo real — Los valores se actualizan al instante mientras escribes, sin necesidad de hacer clic en un botón.
Tres unidades CSS — Convierte entre px, rem y em en cualquier dirección.
Entrada bidireccional — En sub-aplicaciones, escribe en cualquier campo y el otro se actualiza automáticamente.
Tamaño base personalizable — Establece tu tamaño de fuente raíz o padre para conversiones precisas específicas del proyecto.

Productividad

Copiar con un clic

Copia cualquier resultado con su sufijo de unidad (por ejemplo, "1.5rem") listo para pegar en tu CSS.

Ejemplos rápidos

Haz clic en valores comunes como 12px, 16px o 1.5rem para ver resultados al instante.

Tabla de referencia

Tabla expandible que muestra conversiones para 18 valores de píxeles comunes (8px–96px).

Intercambiar conversión

Invierte rápidamente la dirección entre sub-aplicaciones mientras mantienes tu valor actual.

Configuración y Persistencia

Precisión ajustable — Elige de 1 a 6 decimales para los valores de salida.
Preferencias guardadas — El tamaño de fuente base y la configuración de decimales persisten entre sesiones a través de localStorage.
Configuración compartida — La configuración se sincroniza entre el convertidor principal y todas las sub-aplicaciones.

Privacidad

100% Privado: Todos los cálculos ocurren localmente en tu navegador. Ningún valor se envía a ningún servidor y no se recopilan datos.

Preguntas Frecuentes

¿Cuál es el tamaño de fuente base predeterminado?

La mayoría de navegadores usan 16px como el font-size predeterminado para el elemento raíz <html>. Esta herramienta usa 16px de forma predeterminada, pero puedes cambiarlo para que coincida con la configuración de tu proyecto.

¿Cuál es la diferencia entre rem y em?

rem siempre es relativo al tamaño de fuente del elemento raíz, lo que lo hace consistente en toda tu página. em es relativo al tamaño de fuente del elemento padre, lo que significa que los valores em se componen cuando los elementos están anidados (por ejemplo, 1.2em dentro de 1.2em equivale a 1.44× el tamaño raíz).

rem

Relativo a la Raíz

Siempre relativo a <html>
Consistente en toda la página
Sin composición
Mejor para escalado global

Relativo al Padre

Relativo al elemento padre
Dependiente del contexto
Los valores se componen cuando están anidados
Mejor para dimensionamiento a nivel de componente

¿Cuándo debo usar rem en lugar de px?

Usa rem para tipografía, espaciado y dimensiones de diseño cuando quieras que tu diseño se escale con las preferencias del usuario. Los usuarios que aumentan el tamaño de fuente predeterminado de su navegador se beneficiarán de diseños basados en rem. Mantén px para elementos que deben permanecer fijos, como bordes y box-shadows.

Caso de Uso	Unidad Recomendada	Razón
Tipografía	rem	Se escala con las preferencias del usuario
Espaciado/Márgenes	rem	Mantiene el diseño proporcional
Bordes	px	Debe permanecer fijo
Sombras de Caja	px	Se necesita control visual preciso
Dimensionamiento de Componentes	em	Relativo al contexto del componente

¿Por qué el convertidor de PX a EM muestra "Tamaño de Fuente del Padre" en lugar de "Tamaño de Fuente Base"?

Porque em es relativo al tamaño de fuente del elemento padre, no al raíz. La etiqueta cambia a "Tamaño de Fuente del Padre" para recordarte que el tamaño de referencia depende del contexto del elemento en el árbol DOM.

Importante: Cuando uses unidades em, siempre considera el nivel de anidamiento de tus elementos. Cada nivel anidado multiplica el valor em por el font-size de su padre.

¿Se guarda mi configuración?

Sí. Tu tamaño de fuente base y precisión decimal se guardan en el localStorage de tu navegador y se comparten en el convertidor principal y todas las sub-aplicaciones. Persisten incluso después de cerrar el navegador.

¿Se envían mis datos a algún servidor?

No. Todas las conversiones se calculan localmente en tu navegador. No se transmiten ni se almacenan datos en ningún servidor.

Procesamiento 100% del lado del cliente
Sin comunicación con servidor
Sin recopilación de datos ni seguimiento
Configuración almacenada solo en tu navegador