Convertir PX a REM (conversor de unidades CSS)
Convierta los valores px de su CSS a rem según el tamaño de fuente raíz, o rem a px; los selectores y nombres de archivo no se tocan
Sus datos se quedan con usted. La conversión ocurre dentro del navegador; no se envía nada a ningún servidor.
¿Le sirvió esta herramienta?
Gracias, su comentario llegó.
Cómo funciona
Pegue su código CSS en el panel izquierdo; la versión en rem aparece a la derecha mientras escribe. El cálculo es una sola división: rem = px ÷ tamaño de fuente raíz. Los navegadores fijan la raíz en 16 píxeles por defecto, así que 16px son 1rem, 24px son 1.5rem y 14px son 0.875rem. Si su hoja de estilos tiene html { font-size: 62.5% }, la raíz es de 10 píxeles: escriba 10 y 24px pasan a 2.4rem. El conversor lee el archivo como reglas CSS, no como texto suelto; solo cambia lo que va después de los dos puntos. Un nombre de clase como .mt-16px, un nombre de archivo como url(icono-16px.png) y el texto entre comillas quedan igual, y tampoco se tocan los números sin unidad como line-height: 1.5. Si solo tiene una lista de números, por ejemplo 16, 24 y 32 tomados de un diseño en Figma, cada línea se convierte como un valor aparte. La línea de resultado indica cuántos valores se convirtieron, cuántas líneas finas se quedaron en px y cuántos valores de media query se calcularon con base de 16 píxeles. Para el sentido contrario, elija rem → px en Sentido.
Esta herramienta también se busca como convertir px a rem, px a rem, rem a px, px to rem, conversor px a rem, calcular rem css.
¿Qué es rem?
rem (root em) es una unidad de longitud de CSS que se mide respecto al tamaño de fuente del elemento raíz, la etiqueta html. 1rem equivale al font-size de html, que los navegadores fijan por defecto en 16 píxeles. Cuando un visitante aumenta el tamaño del texto en la configuración de su navegador, todo lo escrito en rem crece junto: texto, espacios y anchos. Por eso los diseños accesibles expresan textos y márgenes en rem. A diferencia de em, rem no se multiplica en elementos anidados: toda la página usa la misma raíz.
¿Qué es px (píxel CSS)?
El px de CSS no es un punto físico de la pantalla sino una unidad de referencia: se define como un punto que se ve de 1/96 de pulgada de ancho a una distancia aproximada de un brazo. En las pantallas de teléfono de alta densidad, un píxel CSS se dibuja con dos o tres píxeles físicos. px se comporta como una unidad fija e ignora el tamaño de texto que el visitante eligió en su navegador. Por eso sirve para detalles que deben mantener el mismo grosor, como bordes y sombras, y es una mala elección para tamaños de fuente.
¿Cuál es la diferencia entre px y rem?
px es fijo: un párrafo con font-size: 14px se queda en 14 píxeles aunque el visitante haya elegido un texto grande por defecto. rem sigue esa elección: 0.875rem son 14 píxeles con la configuración por defecto y 17,5 píxeles para alguien que subió el texto por defecto a 20 píxeles. Dos páginas idénticas con la configuración por defecto se comportan distinto para esos lectores: una se queda pequeña y la otra crece con ellos. Use rem para textos, espacios y anchos de página, y px para detalles como bordes finos y sombras, cuyo grosor nunca debe cambiar.
Por qué rem vale siempre 16 píxeles en una media query
Es la trampa en la que caen la mayoría de las migraciones de px a rem. Dentro de una declaración, rem sigue el tamaño de fuente del elemento html: con html { font-size: 62.5% }, 1rem son 10 píxeles. Una media query como @media (min-width: …) no ve ese ajuste. Se evalúa antes de que se apliquen los estilos de la página, y ahí rem significa el tamaño de fuente inicial del navegador: 16 píxeles mientras el visitante no lo haya cambiado.
Si calcula con una raíz de 10 píxeles y convierte el punto de quiebre 768px en 76.8rem, el diseño cambia hacia los 1228 píxeles en lugar de 768 y la vista de tableta termina en pantallas de escritorio. Esta herramienta convierte los valores de las líneas @media siempre con 16, escriba lo que escriba en la raíz (768px → 48rem), y los cuenta en la línea de resultado.
- Dentro de una declaración: rem = px ÷ su tamaño raíz
- Dentro de una media query: rem = px ÷ 16 (valor inicial del navegador)
- Si el visitante agranda el texto por defecto, ambos crecen juntos; de ahí viene la mejora de accesibilidad
Qué valores conviene dejar en px
Convertir todo a rem no es la meta. rem rinde cuando un visitante aumenta el tamaño de texto del navegador: texto, espacios y anchos crecen juntos y la página sigue legible para personas con baja visión. Donde ese crecimiento no aporta nada, px es la opción más segura.
El borde de 1 píxel es el caso clásico. Como 0.0625rem baja de un píxel en cuanto alguien elige un texto más pequeño, y cada navegador redondea esas fracciones a su manera: la línea se ve borrosa en una pantalla y gruesa en otra. Un borde debe ser la misma línea fina en todas partes, no crecer con el texto. Por eso los valores de 1px o menos se quedan en px por defecto; con la opción puede convertirlos igualmente. Los desplazamientos de sombra, el grosor de los íconos y el tamaño real en píxeles de las imágenes suelen quedarse también en px.
- A rem: font-size, padding, margin, gap, max-width, puntos de quiebre
- En px: bordes de 1px, separadores finos, desplazamiento de sombra
- Sin unidad: line-height (como 1.5), z-index, proporciones flex
Preguntas frecuentes
¿Cuántos rem son 16px?
Con la raíz por defecto de 16 píxeles, 16px son exactamente 1rem. Con la misma base, 12px son 0.75rem, 14px son 0.875rem, 18px son 1.125rem, 24px son 1.5rem y 32px son 2rem. Si su elemento html tiene otro font-size, escriba ese valor en el campo de la raíz.
¿Cuál es la diferencia entre rem y em?
rem toma siempre el tamaño de fuente del elemento html y da el mismo valor en cualquier parte de la página. em toma el tamaño de fuente del elemento que lo contiene y se multiplica en elementos anidados. Este conversor trabaja solo entre px y rem; los valores en em no se modifican.
Uso font-size: 62.5%. ¿Qué raíz debo escribir?
El 62,5 % de 16 píxeles son 10 píxeles, así que escriba 10: 24px pasan a 2.4rem y 14px a 1.4rem. Los valores de las media queries se siguen convirtiendo con 16, porque una media query no ve el font-size definido en el elemento html.
¿Se dañan mis nombres de clase y de archivos de imagen?
No. Solo se convierte la parte de valor de las declaraciones CSS. Los selectores como .p-16px, las direcciones como url(fondo-32px.png), el texto entre comillas y los comentarios quedan exactamente igual.
¿Mi código CSS se envía a algún lugar?
No. La conversión ocurre por completo en su navegador; la hoja de estilos que pega no se envía a ningún servidor.