| px | rem |
|---|
Acerca de esta herramienta
El rem (root em) es una unidad de longitud de CSS relativa al tamaño de fuente del elemento raíz <html>, mientras que px es un píxel de dispositivo absoluto. Con el tamaño raíz predeterminado del navegador de 16px, 1rem equivale a 16px, así que 24px son 1.5rem y 10px son 0.625rem. Como el rem se ajusta al tamaño raíz, cambiar la base recalcula de una vez todos los valores en rem — este conversor te permite definir esa base y traducir valores en ambos sentidos.
Úsalo para migrar un design system basado en px a unidades rem escalables, dimensionar la tipografía y el espaciado de modo que respeten el ajuste de tamaño de fuente del navegador de un usuario, verificar una escala de Tailwind o de tokens de diseño, o averiguar mediante ingeniería inversa el valor en píxeles que hay detrás de una declaración en rem de la hoja de estilos de otra persona. La tabla de referencia te da de un vistazo el equivalente en rem de los pasos en px más habituales con la base que hayas elegido.
rem es relativo al tamaño de fuente de la raíz (<html>), no del elemento padre — esa es la única diferencia con em, que es relativo a su propio padre.
Preguntas frecuentes
¿Cómo convierto px a rem?
Divide el valor en píxeles entre el tamaño de fuente raíz. Con la raíz predeterminada de 16px, 24px ÷ 16 = 1.5rem y 10px ÷ 16 = 0.625rem. Cambia la base y el mismo valor en px se corresponde con un rem distinto.
¿1rem son siempre 16px?
Solo cuando el tamaño de fuente raíz es el predeterminado del navegador de 16px. 1rem equivale al font-size que esté definido en el elemento <html>, así que si la raíz es de 10px entonces 1rem son 10px.
¿Cuál es la diferencia entre rem y em?
rem siempre es relativo al tamaño de fuente de la raíz (<html>), por lo que se mantiene coherente en toda la página. em es relativo al tamaño de fuente de su propio elemento/padre, de modo que los valores em anidados se acumulan y pueden derivar.