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.
¿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.
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.
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.