Cómo se usa
- Escriba un tamaño en Valor y elija una dirección en Convertir, por ejemplo de px a rem.
- Revise el Tamaño de letra base (px). Use el tamaño que fija su sitio en el elemento raíz; 16 px es el valor por defecto de los navegadores.
- Pegue CSS en CSS a convertir y elija Convertir los px del CSS a rem o em.
- Copie el CSS con las longitudes convertidas, o compruebe un tamaño en la Tabla de conversión.
Cómo se relacionan px, rem y em
Un px es una longitud absoluta en la pantalla. Un rem es un múltiplo del tamaño de letra del elemento raíz (el elemento html), y un em es un múltiplo del tamaño de letra del elemento en el que se usa. Las dos unidades siguen el tamaño de letra base, así que si la base es de 16 px, 1 rem es 16 px.
Para pasar de px a rem, divida entre la base. Para pasar de rem o em a px, multiplique por la base. Con el mismo tamaño base, rem y em dan el mismo número; solo difieren cuando el tamaño de letra de un elemento padre no es el de la base.
rem = px / tamaño de letra base; px = rem x tamaño de letra baseQué cambia el conversor de CSS y qué no
Se convierte cada número seguido de px, incluidos los valores negativos y los decimales como .5px. Los números se escriben con punto decimal, como exige CSS, con cuatro decimales como máximo y sin ceros finales. Una longitud cero pasa a 0 sin unidad, lo que CSS admite.
El conversor no mira el significado del CSS. Un valor px dentro de un comentario o de una cadena, como un content con el texto 10px, también se convierte. El contenido de url() no se toca, así que un nombre de archivo que acaba en px no cambia. Revise el resultado antes de usarlo.
- Use rem para tamaños de letra, espacios y anchos que deban crecer cuando el visitante cambie el tamaño del texto.
- Mantenga 1 px para los bordes finos, donde un valor en rem se redondearía a una línea borrosa en algunas pantallas.
Ejemplo resuelto: texto de 18 px con una base de 16 px
18 entre 16 es 1,125, así que font-size: 18px pasa a font-size: 1.125rem. Un margen de 40 px pasa a 2.5rem, porque 40 entre 16 es 2,5.
Los mismos 24 px con una base de 10 px son 2,4 rem, y la tabla muestra 24 px como 1,5 rem cuando la base es de 16 px. El fragmento CSS del ejemplo por defecto tiene seis longitudes en px; las seis se convierten y el recuento muestra 6.
Preguntas frecuentes
¿Por qué la base del tamaño de letra es 16 px?
La mayoría de los navegadores usan 16 px como tamaño de letra por defecto del elemento raíz, así que 1 rem es 16 px salvo que el sitio fije otro tamaño. Escriba el valor que su sitio fija en el elemento html.
¿Cuál es la diferencia entre rem y em?
rem se basa en el tamaño de letra del elemento raíz, así que es el mismo en toda la página. em se basa en el tamaño de letra del elemento donde se usa, así que el tamaño cambia cuando los elementos están anidados. Con la misma base, los números son iguales.
¿Debo convertir todos los valores en px a rem?
No siempre. Un borde de 1 px se ve más nítido en px en muchas pantallas, y algunos detalles pequeños quedan mejor fijos. Use rem para tamaños de texto, espacios y anchos de diseño que deban escalar con la configuración del visitante.
¿Por qué algunos valores en px de mi CSS no se convierten?
Un valor en px se convierte solo cuando está solo como longitud. Los valores dentro de url() y textos como 10pxx o 10px-2 que no son una longitud simple se dejan como están. Revise a mano cualquier valor poco habitual.
¿Por qué la tabla llega solo hasta 64 px?
Lista los tamaños que los diseñadores usan con más frecuencia. Para cualquier otro tamaño, escríbalo en el cuadro Valor y elija la dirección.
Fuentes
Cifras y texto revisados por última vez el martes, 10 de noviembre de 2026.