Converter px a rem

Escribe un valor en calquera unidade e obtén a súa equivalencia nas demais. Por defecto, 1rem = 16px, o tamaño de letra dos navegadores; cámbiao se o teu CSS usa outro. Tamén podes pegar un bloque de CSS e pasar todos os seus px a rem dunha vez.

Conversor de unidades

px
px
px
rem é relativo ao tamaño de letra do elemento raíz (html); em e %, ao do elemento pai; 1pt = 1/72 de polgada = 1,333px; 1vw = 1% do largo da xanela.

Táboa de equivalencias

pxremempt%

Converter un bloque de CSS de px a rem

px, rem e em: cal usar?

O píxel (px) é unha medida fixa. rem («root em») é relativo ao tamaño de letra do elemento html, que en todos os navegadores é 16px salvo que o usuario o cambie: por iso 1rem = 16px, 1,5rem = 24px e 0,875rem = 14px. em é relativo ao tamaño de letra do elemento pai, así que se acumula ao aniñar elementos.

Usar rem para tamaños de letra, marxes e espazados respecta a configuración das persoas que aumentan o tamaño de letra do navegador por problemas de visión, algo que recomendan as pautas de accesibilidade WCAG. Os px seguen a ser prácticos para bordos finos e sombras.

Fórmula para pasar de px a rem

rem = px ÷ tamaño base. Coa base por defecto de 16px: 24px ÷ 16 = 1,5rem. E ao revés, px = rem × 16. Algúns proxectos poñen html { font-size: 62.5%; } para que 1rem valla 10px e as contas sexan máis doadas; nese caso, escribe 10 como tamaño base.

vw e vh son o 1% do largo e do alto da xanela: útiles para tipografía fluída xunto con clamp(), por exemplo font-size: clamp(1rem, 2.5vw, 2rem).