Salta al contingut
🛠️
Whiz Tools

Convertidor de PX a REM a EM - Calculadora gratuïta d'Unitats CSS

Converteix píxels a unitats REM i EM instantàniament. Convertidor gratuït d'unitats CSS per a disseny web responsiu. Admet mides de font personalitzades i càlculs en temps real per a resultats precisos.

Convertidor d'Unitats PX, REM i EM

Converteix entre píxels (PX), root em (REM) i em (EM). Introdueix un valor en qualsevol camp per veure els valors equivalents en altres unitats.

px
px
px
rem
em
Visualització no disponible per a valors negatius o zero

Fórmules de Conversió

  • PX a REM: valor en px ÷ mida de font arrel
  • PX a EM: valor en px ÷ mida de font de l'element pare
  • REM a PX: valor en rem × mida de font arrel
  • EM a PX: valor en em × mida de font de l'element pare
Calculadora de càrrega...
📚

Documentació

Convertidor d’unitats PX, REM i EM

Un convertidor de px a rem i em converteix una longitud CSS entre píxels (px), rem i em, fent servir una mida de font arrel i una mida de font del pare que estableix la persona. Les tres unitats són les maneres més habituals de definir la mida del text i l’espaiat en CSS, el llenguatge que s’utilitza per donar estil a les pàgines web.

Què són px, rem i em?

Un píxel (px) és una unitat fixa. Una caixa amb una amplada de 200px es manté amb una amplada de 200px independentment de la mida de font que utilitzi la pàgina.

Un rem («em arrel») és una unitat que s’escala amb la mida de font de l’element arrel de la pàgina, normalment l’etiqueta <html>. La majoria de navegadors estableixen aquesta mida de font arrel en 16px, tret que el lloc web la canviï. Si la mida de font arrel és de 16px, aleshores 1rem equival a 16px.

Un em és una unitat que s’escala amb la mida de font de l’element pare, l’element que el conté. Si un element pare té font-size: 20px, aleshores 1em dins d’aquest pare equival a 20px.

La diferència principal entre rem i em és amb què es compara cadascun. Rem sempre pren com a referència l’element arrel. Em pren com a referència el pare més proper, de manera que el seu valor pot canviar a cada nivell d’imbricació.

Com es calcula de px a rem

Per convertir píxels a rem, divideix el valor en píxels per la mida de font arrel:

r=pRr = \frac{p}{R}

on r és la longitud en rem, p la longitud en píxels i R la mida de font arrel en píxels.

Exemple resolt

Amb la mida de font arrel predeterminada de 16px, 24px es converteix en:

24 ÷ 16 = 1,5rem

Si un lloc web estableix la mida de font arrel en 10px (un truc habitual que es fa establint html { font-size: 62.5%; }, ja que 62,5 % de 16px és 10px), els mateixos 24px es converteixen en:

24 ÷ 10 = 2,4rem

Com es calcula de rem a px

Per fer la conversió inversa, multiplica el valor en rem per la mida de font arrel:

p=r×Rp = r \times R

on p és la longitud en píxels, r la longitud en rem i R la mida de font arrel.

Amb una arrel de 16px, 1.5rem es torna a convertir en 1,5 × 16 = 24px.

Com es calcula de px a em

Per convertir píxels a em, divideix el valor en píxels per la mida de font de l’element pare:

e=pPe = \frac{p}{P}

on e és la longitud en em i P la mida de font de l’element pare en píxels.

Exemple resolt

Si la mida de font de l’element pare és de 20px, aleshores 24px es converteix en:

24 ÷ 20 = 1,2em

Com es calcula d’em a px

Multiplica el valor en em per la mida de font del pare:

p=e×Pp = e \times P

on p és la longitud en píxels, e la longitud en em i P la mida de font del pare.

Amb un pare de 20px, 1.2em es torna a convertir en 1,2 × 20 = 24px.

Com es calcula de rem a em i d’em a rem

Com que rem i em prenen com a referència mides de font diferents, per convertir-les calen tant la mida de font arrel com la mida de font del pare:

e=r×RPe = r \times \frac{R}{P}

r=e×PRr = e \times \frac{P}{R}

on R és la mida de font arrel i P la mida de font del pare.

Exemple resolt

Amb una mida de font arrel de 16px i una mida de font del pare de 20px, 2rem es converteix en:

2 × (16 ÷ 20) = 1,6em

Si les mides de font arrel i del pare són iguals, 1rem sempre equival a 1em.

Quan és útil cada unitat

Els píxels funcionen bé per a detalls que no haurien de canviar de mida, com ara una vora d’1px o una icona d’amplada fixa.

Rem és habitual per a l’espaiat i la tipografia que haurien de mantenir-se coherents a tota la pàgina. Com que sempre fa referència a la mida de font arrel, un valor rem no canvia per molt profund que sigui el nivell d’imbricació de l’element. Això també vol dir que les maquetacions basades en rem s’ajusten automàticament quan una persona augmenta la mida de font predeterminada del navegador, cosa que ajuda les persones amb baixa visió.

Em funciona bé dins d’un únic component autocontingut, com ara un botó, en què el farciment s’hauria d’ajustar proporcionalment a la mida de la font del botó mateix. Un problema habitual d’em és que s’acumula: si diversos elements imbricats utilitzen font-size: 1.2em, cada nivell multiplica l’anterior, de manera que les mides de font creixen més ràpid del que es pretenia.

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

Després de tres nivells, el text ha crescut aproximadament un 73 %, i no el 20 % que un desenvolupador podria esperar d’una sola regla 1.2em.

Ús del convertidor

  1. Introdueix un valor al camp de píxels, rem o em.
  2. Els altres dos camps s’actualitzen automàticament, arrodonits a quatre decimals.
  3. Estableix la mida de font arrel perquè coincideixi amb la de l’element <html> del projecte. Per defecte és de 16px en la majoria de navegadors i només afecta rem.
  4. Estableix la mida de font del pare perquè coincideixi amb la mida de font de l’element que contindria un valor em. Només afecta em.
  5. Utilitza el botó de còpia situat al costat d’un camp per copiar-ne el valor.

Els dos camps de mida de font accepten un nombre enter de píxels, i el valor mínim permès és 1px. El botó de restabliment esborra el valor i torna a establir les dues mides de font en 16px.

Sota els camps, l’eina dibuixa una barra per unitat. Les tres barres representen la mateixa longitud física, de manera que tenen la mateixa amplada, cosa que permet comprovar ràpidament que la conversió és correcta. Una barra es dibuixa amb la seva longitud real en píxels fins a 300 px; qualsevol valor més llarg s’escala per tal que hi càpiga, de manera que tant un valor de 600 px com un de 900 px acaben en 300 px. Les barres només apareixen quan el valor en píxels és superior a zero.

Preguntes més freqüents

Quina diferència hi ha entre rem i em? Rem sempre fa referència a la mida de font de l’element arrel. Em fa referència a la mida de font de l’element pare més proper. Un valor rem es manté igual a tota la pàgina; un valor em pot canviar segons la profunditat d’imbricació de l’element.

Per què els navegadors utilitzen 16px com a mida de font predeterminada? 16px ha estat durant molt de temps la mida de text predeterminada dels principals navegadors perquè és còmoda de llegir en pantalles habituals sense estils addicionals. Les directrius d’accessibilitat web recomanen que el text es pugui redimensionar fins a 200 % sense trencar la maquetació de la pàgina, i 16px és un punt de partida pràctic per aconseguir-ho.

Què és el truc de 62,5 %? Establir html { font-size: 62.5%; } converteix la mida de font arrel predeterminada de 16px en 10px, ja que 62,5 % de 16 és 10. Això simplifica els càlculs amb rem, perquè 1,6rem equival a 16px i 2,4rem equival a 24px.

Els valors px, rem i em poden ser negatius? Sí, en propietats que accepten longituds negatives, com ara els marges o les transformacions CSS. En CSS, el farciment no pot tenir un valor negatiu; els navegadors ignoren un valor de farciment negatiu. El convertidor gestiona els valors negatius, però no hi dibuixa cap barra, perquè una barra no pot tenir una amplada negativa.

Cal convertir tots els valors en píxels a rem? No necessàriament. Les vores i altres detalls fins se solen mantenir en píxels, ja que poques vegades cal que s’escalin amb la mida de font i poden tenir un aspecte irregular amb amplades subpíxel. Rem és adequat per a l’espaiat i la tipografia que haurien d’escalar-se segons la preferència de mida de font de l’usuari.

L’elecció de la unitat afecta el rendiment de la pàgina? No. Els navegadors converteixen totes les longituds CSS al mateix valor intern durant la maquetació, de manera que px, rem i em es representen amb la mateixa rapidesa. L’elecció entre aquestes unitats afecta el manteniment i l’accessibilitat, no la velocitat.