Convertir px a rem (y rem a px)

De píxeles a rem sin hacer cuentas

Este convertidor pasa un tamaño en píxeles a rem, y al revés, a partir del tamaño de fuente base de su página. También calcula valores em según el tamaño del elemento padre, convierte un bloque de CSS completo y muestra una tabla de equivalencias de 1 a 96 px. Todo se calcula en su navegador: no se envía nada.

Cómo se usa

1. En «Tamaño de fuente base», deje 16 o elija un valor rápido: 10, 14, 16, 18 o 20 px.
2. En «Convertir px ↔ rem», escriba en «Píxeles (px)» o en «rem»: el otro campo se actualiza y la fórmula aparece debajo. «Copiar» lleva el valor con su unidad al portapapeles.
3. Para un em, indique el «Tamaño del padre (px)» y luego el valor en píxeles o en em.
4. Para una hoja de estilos entera, pegue el código en «CSS que convertir». Ajuste «Ignorar 1px», «Ignorar los bordes (border, outline)», «Decimales» y «Conservar el px en un comentario», y pulse «Copiar el CSS».
5. En la tabla, un clic sobre un valor lo copia.

La base y las opciones se guardan en su dispositivo.

px, rem y em: en qué se diferencian

El px es una medida fija. El rem equivale al tamaño de fuente del elemento raíz html, 16 px si nadie lo cambia. El em equivale al tamaño de fuente del padre y se acumula: un texto a 1.2em dentro de un bloque a 1.2em mide 1,44 veces la base, es decir 23,04 px con una base de 16.

La fórmula es rem = px ÷ base y, a la inversa, px = rem × base. Con base 16, 24 px son 1.5rem, 12 px son 0.75rem y 1.25rem son 20 px. Es la cuenta que hace falta cuando el diseño llega con todas las medidas en píxeles y el proyecto trabaja en rem.

Por qué el rem importa para la accesibilidad

Una persona con baja visión puede subir el tamaño de letra por defecto de su navegador de 16 a 20 px. Un título escrito en 24px se queda en 24 px y no respeta ese ajuste. Escrito en 1.5rem, pasa a 30 px. El rem sigue la preferencia del usuario, algo que piden las pautas de accesibilidad web que aplican las administraciones públicas en España.

Cuándo usar rem o em

• rem para tamaños de texto, márgenes y espacios de la maqueta: toda la página depende de un solo valor.
• em para lo que debe seguir al texto de su propio componente, como el padding de un botón. Con un padre de 20 px, 30 px son 1.5em.
• px para bordes finos y sombras; de ahí la opción «Ignorar los bordes (border, outline)».

Ejemplo de conversión por lotes

Con base 16 y los bordes ignorados, padding: 16px 24px; border: 1px solid; font-size: 18px se convierte en padding: 1rem 1.5rem; border: 1px solid; font-size: 1.125rem. Los selectores, las condiciones @media, los comentarios, las cadenas y los url() no se tocan.

Preguntas frecuentes

¿Cuántos píxeles es 1rem?

1rem vale la base de la página: 16 px si no ha cambiado el tamaño de html. Con html { font-size: 62.5% }, 1rem vale 10 px y 14 px se escriben 1.4rem.

¿Debo cambiar la base si mi web usa 16 px?

No. Cámbiela solo si su hoja de estilos pone otro tamaño de fuente en html; si no, todos los resultados saldrán mal.

¿Por qué dejar 1px en píxeles?

Una línea de 1 px convertida en 0.0625rem puede verse borrosa o desaparecer en algunas pantallas. «Ignorar 1px» la deja como está.

¿Cuántos decimales elegir?

Cuatro bastan: 1 px son 0.0625rem con base 16. Con base 14, 10 px dan 0.7143rem con cuatro decimales y 0.71rem con dos, es decir 9,94 px, una diferencia que no se ve.