Píxeles a rem
Convierta valores de píxeles a rem para diseños CSS modernos. rem escala con el tamaño de fuente raíz del usuario, mejor para la accesibilidad que el px fijo. La raíz predeterminada del navegador suele ser 16 px, por lo que 24 px = 1,5 rem a menos que el proyecto anule html { font-size }.
Pixels
Root font size (px)
Result
1rem
¿Cómo convertir px a rem
1. Ingrese el valor de píxel de su diseño (por ejemplo, 32 px).
2. Establezca el tamaño de fuente raíz (predeterminado 16 px si sin cambios).
3. Copia el resultado rem en su hoja de estilo.
4. Utilice rem para tamaños de fuente, espaciado y escala de componentes; px para bordes finos si es necesario.
Ejemplos de px a rem
Tipo de cuerpo y encabezado
16 px = 1 rem (predeterminado). 24 px = 1,5 rem encabezado. 14 px = 0,875 rem texto pequeño.
Raíz personalizada de 10 px (sistemas de diseño)
Algunos equipos configuran html { font-size: 62.5% } por lo que 1 rem = 10 px. Luego, token de diseño de 32 px = 3,2 rem.
Escala de espaciado
Cuadrícula de 8 px → 0,5 rem en raíz de 16 px. Relleno de 16 px = 1 rem; ritmo consistente en escalas tipo Tailwind.
¿Cuándo convertir px a rem
• Cuando implementas las especificaciones de Figma en CSS responsivo con zoom accesible.
• Cuando te alineas con los tokens del sistema de diseño definidos en rem.
• Cuando los usuarios anulan el tamaño de fuente predeterminado del navegador, los diseños rem se adaptan.
¿Cuándo elegir algo else
• Cuando los necesites en relación con una fuente de componente anidada, use píxeles para em.
• Cuando necesites unidades de ventana gráfica (vw/vh) para diseños de pantalla completa.
• Cuando coincida 1:1 píxeles del dispositivo en los bordes de la retina, los bordes de 1 px a menudo permanecen en px.
rem vs em en el componente CSS
em se compone dentro de elementos anidados con diferentes tamaños de fuente; el relleno en em crece con el texto local. rem permanece vinculado a la raíz, lo que proporciona un espacio predecible entre los componentes. Muchos equipos usan rem para la escala de diseño y em solo para el espaciado entre letras o microajustes vinculados al tipo local.
Flujo de trabajo de transferencia de diseño
Los diseñadores exportan px desde Figma; los desarrolladores dividen según la raíz acordada (documento en README). Cuando el proyecto utiliza un truco del 62,5%, confirme antes de convertir: mezclar suposiciones duplica o reduce a la mitad la interfaz de usuario.
Preguntas frecuentes
¿Qué es? rem?
rem = "root em". 1 rem equivale al tamaño de fuente del elemento html, no al principal.
¿Por qué no usar px en todas partes?
El px fijo ignora las preferencias de fuente del usuario. rem respeta la escala de raíz para accesibilidad (WCAG).
¿Tamaño de fuente raíz predeterminado?
La mayoría de los navegadores tienen por defecto 16 px en html. Los usuarios pueden cambiar esto en la configuración.
Fórmula?
rem = px ÷ rootFontSizePx. Ejemplo: 20 px ÷ 16 = 1,25 rem.
¿Rem funciona para márgenes y relleno?
Sí, rem se aplica a cualquier propiedad de longitud CSS, no solo al tamaño de fuente.
¿Se cargan datos?
No. La conversión se ejecuta localmente.