Cómo usarla
- Establece el tamaño de fuente raíz si tu sitio lo modifica (por ejemplo, html { font-size: 62.5% } hace que sea de 10px).
- Escribe un valor en cualquiera de los campos para convertir de px a rem o de rem a px. Cambia a em si quieres usar como referencia un elemento padre.
- Usa la tabla para consultar valores rápidamente o pega un fragmento CSS para convertir todas las longitudes en px de una vez y copiar el resultado.
Cómo funciona
rem = px ÷ tamaño de fuente raíz. Con el valor predeterminado de 16px para la raíz, 24px equivalen a 1.5rem y 14px a 0.875rem. em usa la misma fórmula, pero con el tamaño de fuente del elemento padre; por eso los valores em anidados se multiplican. rem evita esto porque siempre se calcula respecto a la raíz.
Usar rem para los tamaños de fuente y el espaciado permite ampliar el texto cuando alguien aumenta el tamaño de fuente predeterminado en la configuración del navegador, lo que ayuda a las personas con baja visión. Los valores se redondean a cuatro decimales.
El convertidor de fragmentos modifica los números seguidos de px. No altera los comentarios, url(…) ni las cadenas entre comillas; conserva los valores 1px si así lo indicas (por lo general, los bordes finos deberían seguir siendo de 1px), convierte 0px en 0 y, de forma predeterminada, no modifica las condiciones @media ni @container, porque en las consultas de medios rem y em siempre hacen referencia al tamaño de fuente inicial del navegador, independientemente del tamaño de fuente raíz que definas. No interpreta la semántica de calc() más allá de reemplazar los números px que contiene, lo cual sigue siendo correcto porque cada longitud se convierte por separado.
Ejemplos
Tamaño de raíz predeterminado
Con una raíz de 16px: 12px = 0.75rem, 20px = 1.25rem, 32px = 2rem, 0.5rem = 8px.
El truco del 62.5%
Si tu CSS establece html { font-size: 62.5% }, la raíz es de 10px, así que 14px = 1.4rem y 24px = 2.4rem. Establece el tamaño de fuente raíz en 10 para que coincida.
Convertir un componente
padding: 24px 16px; border: 1px solid #ddd; se convierte en padding: 1.5rem 1rem; border: 1px solid #ddd; si la opción «Conservar valores de 1px» está activada.
Preguntas frecuentes
¿Debería usar rem o em?
Usa rem para la mayoría de los tamaños de fuente, el espaciado y el diseño, porque su comportamiento es predecible en todas partes. Usa em cuando quieras que algo cambie de tamaño según el texto de su propio componente, como el relleno de un botón.
¿Por qué no convertir las consultas de medios a rem?
Puedes hacerlo, pero en una consulta de medios 1rem siempre equivale al tamaño de fuente predeterminado del navegador (normalmente 16px), no al tamaño de fuente de html. Por eso, el convertidor las omite de forma predeterminada; desactiva la opción si de todos modos divides entre 16.
¿rem es más accesible que px?
Para los tamaños de fuente, sí: rem respeta la configuración predeterminada de tamaño de fuente del usuario, mientras que los tamaños de fuente en px la ignoran. El zoom del navegador funciona con ambas unidades.
Privacidad
Las conversiones y el fragmento CSS se procesan en tu navegador y no se envían a ningún sitio.