Conversor de px a rem i em

Converteixi entre px, rem i em utilitzant les seves pròpies mides de font d'arrel i de context: editeu qualsevol camp i els altres dos s'actualitzaran mentre escriviu.

Valors
Introduïu un valor en px, rem o em; els altres dos s'actualitzaran mentre escriviu.

Cada conversió s'executa al seu navegador. Cap dada que introdueixi es puja a BroBroGo.

PMF

Quina és la diferència entre px, rem i em?

px és una longitud fixa. rem es mesura respecte a la mida de font de l'arrel de la pàgina, de manera que amb una arrel de 16px, 1rem equival a 16px. em es mesura respecte a la mida de font de l'element on es troba. Definir la mida del text i l'espaiat en rem permet que tot s'escala quan un lector canvia la mida de font predeterminada.

Per què hi ha una mida de context em independent?

em és relatiu a la mida de font del seu propi element, que no sempre és l'arrel. Definiu el context em amb la mida de font d'aquest element per interpretar l'em correctament, i mantingueu-lo igual que l'arrel quan coincideixin.

Què passa si la meva mida de font de l'arrel no és de 16px?

Canvieu el camp de la mida de font de l'arrel per fer-lo coincidir amb el vostre CSS i cada valor rem s'actualitzarà a l'instant. La taula ràpida de sota és una guia pràctica per a la base comuna de 16px de la qual parteixen la majoria de llocs.

Què fa el conversor de px a rem i em

Aquest conversor tradueix valors en píxels (px) a rem i a em, i també a la inversa. Escriviu una quantitat en qualsevol de les tres unitats i l'eina calcula automàticament el valor equivalent en les altres dues. També podeu fixar una mida de font de l'arrel pròpia i una mida de font de context em pròpia, perquè les conversions s'ajustin a les mides reals del vostre disseny.

El camp Valors i com s'actualitza mentre escriviu

Al camp "Valors" escriviu la quantitat que voleu convertir, en px, rem o em. Com indica el mateix conversor: "Introduïu un valor en px, rem o em; els altres dos s'actualitzaran mentre escriviu." No cal prémer cap botó: tan bon punt canvieu qualsevol dels tres camps, els altres dos es recalculen a l'instant amb el nou valor.

La mida de font de l'arrel i el seu paper en el càlcul del rem

El camp "Mida de font de l'arrel (px)" defineix la base sobre la qual es calcula el rem. Per defecte és de 16px, i en aquest estat inicial 16px equivalen a 1rem i també a 1em. Si canvieu l'arrel —per exemple, la pugeu a 20px—, un valor de 30px passa a equivaler a 1.5rem, en lloc del resultat que donarien 16px d'arrel. El camp només accepta números superiors a 0; si hi escriviu una altra cosa, el conversor mostra: "La mida de font de l'arrel ha de ser un número superior a 0."

El context em i per què necessita la seva pròpia mida

L'em no es mesura respecte a l'arrel de la pàgina, sinó respecte a la mida de font de l'element on s'utilitza; per això el conversor li dedica un camp a part: "mida de font de context em (px)". També comença a 16px. Si aquest element té, per exemple, una mida de font de 24px, un valor de 12px equival a 0.5em amb aquest context. Igual que amb l'arrel, el context em només admet números superiors a 0; en cas contrari apareix: "La mida de font de context em ha de ser un número superior a 0."

La taula de conversions habituals de 16px

Sota els camps, el conversor mostra la taula "Conversió comuna de px → rem (base de 16px)", amb valors de píxels freqüents ja convertits a rem assumint una arrel de 16px. Així, per exemple, 24px equivalen a 1.5rem amb aquesta arrel, sense que calgui escriure cada valor un per un quan només voleu consultar una conversió habitual.

Valors negatius i missatges d'error

El conversor admet valors de píxels negatius, de manera que podeu convertir marges o desplaçaments negatius igual que qualsevol altre valor. Si el camp "Valors" queda buit o hi escriviu una cosa que no és un número, el missatge que apareix és: "Introduïu un número per convertir."

Privadesa i a qui li és útil

Cada conversió s'executa al seu navegador. Cap dada que introdueixi es puja a BroBroGo. Aquest conversor està pensat per a qui necessita passar valors fixos en píxels a unitats relatives com rem o em per a un disseny responsiu, per a qui vol entendre com diferents mides de font de l'arrel canvien els valors en rem, per a qui necessita calcular valors en em a partir de la mida de font d'un element concret, i per a qui vol que les seves mides s'ajustin correctament quan un lector canvia la mida de font predeterminada del seu navegador.

Preguntes freqüents

Quina és la diferència entre px, rem i em? px és una longitud fixa. rem es mesura respecte a la mida de font de l'arrel de la pàgina, de manera que amb una arrel de 16px, 1rem equival a 16px. em es mesura respecte a la mida de font de l'element on es troba. Definir la mida del text i l'espaiat en rem permet que tot s'escala quan un lector canvia la mida de font predeterminada.

Per què hi ha una mida de context em independent? em és relatiu a la mida de font del seu propi element, que no sempre és l'arrel. Definiu el context em amb la mida de font d'aquest element per interpretar l'em correctament, i mantingueu-lo igual que l'arrel quan coincideixin.

Què passa si la meva mida de font de l'arrel no és de 16px? Canvieu el camp de la mida de font de l'arrel per fer-lo coincidir amb el vostre CSS i cada valor rem s'actualitzarà a l'instant. La taula ràpida de sota és una guia pràctica per a la base comuna de 16px de la qual parteixen la majoria de llocs.