Convertir px a rem

Escribe un valor en cualquier unidad y obtén su equivalencia en las demás. Por defecto, 1rem = 16px, el tamaño de letra de los navegadores; cámbialo si tu CSS usa otro. También puedes pegar un bloque de CSS y pasar todos sus px a rem de una vez.

Conversor de unidades

px
px
px
rem es relativo al tamaño de letra del elemento raíz (html); em y % lo son al del elemento padre; 1pt = 1/72 de pulgada = 1,333px; 1vw = 1 % del ancho de la ventana.

Tabla de equivalencias

pxremempt%

Convertir un bloque de CSS de px a rem

px, rem y em: ¿cuál usar?

El píxel (px) es una medida fija. rem («root em») es relativo al tamaño de letra del elemento html, que en todos los navegadores es 16px salvo que el usuario lo cambie: por eso 1rem = 16px, 1,5rem = 24px y 0,875rem = 14px. em es relativo al tamaño de letra del elemento padre, así que se acumula al anidar elementos.

Usar rem para tamaños de letra, márgenes y espaciados respeta la configuración de las personas que aumentan el tamaño de letra del navegador por problemas de visión, algo que las pautas de accesibilidad WCAG recomiendan. Los px siguen siendo prácticos para bordes finos y sombras.

Fórmula para pasar de px a rem

rem = px ÷ tamaño base. Con la base por defecto de 16px: 24px ÷ 16 = 1,5rem. Y al revés, px = rem × 16. Algunos proyectos ponen html { font-size: 62.5%; } para que 1rem valga 10px y las cuentas sean más fáciles; en ese caso, escribe 10 como tamaño base.

vw y vh son el 1 % del ancho y del alto de la ventana: útiles para tipografía fluida junto a clamp(), por ejemplo font-size: clamp(1rem, 2.5vw, 2rem).