Convertir px a rem

Escriu un valor en qualsevol unitat i obtén-ne l'equivalència en les altres. Per defecte, 1rem = 16px, la mida de lletra dels navegadors; canvia-la si el teu CSS en fa servir una altra. També pots enganxar un bloc de CSS i passar tots els seus px a rem d'un sol cop.

Convertidor d'unitats

px
px
px
rem és relatiu a la mida de lletra de l'element arrel (html); em i %, a la de l'element pare; 1pt = 1/72 de polzada = 1,333px; 1vw = 1% de l'amplada de la finestra.

Taula d'equivalències

pxremempt%

Convertir un bloc de CSS de px a rem

px, rem i em: quin fer servir?

El píxel (px) és una mesura fixa. rem («root em») és relatiu a la mida de lletra de l'element html, que en tots els navegadors és 16px tret que l'usuari la canviï: per això 1rem = 16px, 1,5rem = 24px i 0,875rem = 14px. em és relatiu a la mida de lletra de l'element pare, de manera que s'acumula en niuar elements.

Fer servir rem per a mides de lletra, marges i espais respecta la configuració de les persones que augmenten la mida de lletra del navegador per problemes de visió, tal com recomanen les pautes d'accessibilitat WCAG. Els px continuen sent pràctics per a vores fines i ombres.

Fórmula per passar de px a rem

rem = px ÷ mida base. Amb la base per defecte de 16px: 24px ÷ 16 = 1,5rem. I a l'inrevés, px = rem × 16. Alguns projectes posen html { font-size: 62.5%; } perquè 1rem valgui 10px i els comptes siguin més fàcils; en aquest cas, escriu 10 com a mida base.

vw i vh són l'1% de l'amplada i de l'alçada de la finestra: útils per a la tipografia fluida juntament amb clamp(), per exemple font-size: clamp(1rem, 2.5vw, 2rem).