Conversor de REM a PX

Las unidades rem CSS se escalan desde el tamaño de fuente del elemento raíz (generalmente el elemento html), no desde cada padre como em. Un rem equivale al tamaño de píxel que tenga configurada la raíz. Los navegadores tienen de forma predeterminada una raíz de 16 px, por lo que 1 rem = 16 px fuera del cuadro a menos que su hoja de estilo cambie html {font-size}. rem respeta las configuraciones de accesibilidad y zoom del usuario que amplían el texto predeterminado; px permanece absoluto en la cuadrícula de píxeles.

Las transferencias de diseño de Figma y Sketch generalmente anotan px, mientras que las bases de código de producción a menudo crean espacios y escriben rem para mantener la coherencia con los tokens de diseño. Este convertidor cierra la brecha en el tamaño de raíz elegido para su proyecto. Muchos sistemas de diseño mantienen una raíz de 16 px; algunos equipos establecen una raíz de 10 px, por lo que los mapas de cálculo mental son 1,6 rem ≈ 16 px; siempre coincida con el valor en su CSS global.

Cambie rem → px o px → rem con el control segmentado. La etiqueta del campo de valor cambia para mostrar qué unidad está ingresando. El campo de tamaño de fuente raíz establece el multiplicador: si su truco html { font-size: 62.5% } está en juego, es decir, una raíz efectiva de 10 px, no 16 px.

Ejemplo resuelto con los campos rem → px predeterminados: 1,5 rem en 16 px de raíz. Multiplica 1,5 × 16 = resultado del título de 24 px. El resumen dice "1.5 rem @ 16 px root" y la fila de fórmula muestra 1.5 × 16. Voltee a px → rem con 48 px ingresados ​​y obtendrá 3 rem (48 ÷ 16).

Entradas de escala de espaciado comunes: 0,25 rem = 4 px, 0,5 rem = 8 px, 1 rem = 16 px, 1,5 rem = 24 px, 2 rem = 32 px en la raíz predeterminada. Los pasos de tipografía suelen utilizar 0,875 rem (14 px) para copias pequeñas de la interfaz de usuario y 1,125 rem (18 px) para texto grande que califica según los umbrales de contraste de texto grande de las WCAG.

Los errores comunes incluyen convertir con una raíz de 16 px mientras que la producción usa una raíz de 10 px (todo se envía con un tamaño insuficiente), mezclar el relleno rem con altura de línea em en componentes anidados y asumir el valor predeterminado del navegador después de que el usuario cambió el tamaño del texto de accesibilidad del sistema operativo; rem fluye con esa configuración, px no.

Las unidades em están intencionalmente fuera de alcance: em se componen por tamaño de fuente principal anidado, por lo que un solo multiplicador no puede representar todas las cadenas em. utiliza esta herramienta solo para rem y px.

Límites: conversión de un solo valor: sin calc() con unidades mixtas, ventana gráfica vw o puntos de interrupción de abrazadera(). Es posible que aparezcan resultados de subpíxeles para raíces impares; Los navegadores redondean px en el momento del renderizado.