Convertire px in rem
Con questo strumento puoi convertire px in rem (e viceversa): inserisci un valore, regola la dimensione base e ottieni rem, em, pt, percentuale e vw, con una tabella delle misure comuni.
Esempio: Valore 24 · Unità del valore: px (pixel) · Dimensione del carattere dell'elemento radice (rem) 16 px · Dimensione del carattere dell'elemento padre (em, %) 16 px · Larghezza della finestra (vw) 1440 px → Risultato: 24 px = 1,5 rem. Fonte: W3C – CSS Values and Units Module Level 4: absolute lengths (1in = 96px = 72pt) e font-relative lengths (em, rem). Aggiornato al: .
Come si calcola
Con i 16 px predefiniti del browser, 24 px sono esattamente 1,5 rem. La formula è rem = px / dimensione base, e viceversa px = rem · dimensione base.
Come si calcola
rem è relativo alla dimensione del carattere dell'elemento radice (html), em a quella dell'elemento padre. 1 pt è 1/72 di pollice e 1 px 1/96 di pollice, quindi 1 pt = 4/3 px; 12 pt equivalgono a 16 px. La percentuale nella dimensione del carattere si riferisce al carattere padre. 1 vw è l'1 % della larghezza della finestra. Lo strumento converte prima il valore in px e poi in tutte le altre unità.
Utile sapere
- Se un visitatore ha ingrandito il carattere del browser, i valori in rem si adattano da soli mentre px resta fisso (accessibilità, WCAG 1.4.4).
- Se il tuo CSS imposta
html { font-size: 62.5% }, 1 rem = 10 px. Inserisci allora 10 come dimensione base. - em si accumula: 1,5 em dentro un elemento con 1,5 em dà 2,25 volte. rem evita questo problema.
- rem è comune per spaziature e dimensioni del testo; px resta sensato per linee sottili e bordi.
Domande frequenti
Come si converte px in rem?
Si divide il valore in px per la dimensione base del carattere. Con 16 px: 24 px / 16 = 1,5 rem.
Quanti px è 1 rem?
Di default 16 px, perché i browser impostano così il carattere radice. Se qualcuno cambia il carattere del browser o imposta font-size su html, il valore cambia.
Qual è la differenza tra em e rem?
rem si riferisce sempre al carattere radice (html), em a quello dell'elemento padre. Per questo i valori em possono moltiplicarsi in elementi annidati.
Quanti pt sono 16 px?
12 pt, perché 1 pt = 4/3 px. Al contrario 10 pt sono circa 13,33 px.
Fonti e riferimenti normativi
- W3C – CSS Values and Units Module Level 4: absolute lengths (1in = 96px = 72pt) e font-relative lengths (em, rem)
- MDN – CSS-Längeneinheiten (rem, em, vw)
- W3C WCAG 2.2 – Success Criterion 1.4.4 Resize Text (le unità relative rispettano la dimensione del carattere dell’utente)
Aggiornato al: · Principi editoriali
Strumenti correlati
- Convertire punti in mmConverti punti in mm: 1 pt = 0,3528 mm (1/72 di pollice). Dimensione del carattere in millimetri, pica, pollici e pixel a ogni risoluzione, con tabella.
- Pixel in cmConverti pixel in cm con la risoluzione giusta: da pixel a cm, mm e pollici, da lunghezza a pixel e la dimensione di stampa di una foto a 300 dpi.
- Generatore di gradienti CSSCrea gradienti CSS lineari, radiali o conici con tutti i punti colore che vuoi, angolo e colore di riserva: anteprima dal vivo e codice CSS pronto da copiare.
- Generatore di box-shadow CSSCrea ombre CSS con i cursori: livelli, spostamento, sfocatura, estensione, colore trasparente, inset e modelli – anteprima dal vivo, CSS pronto da copiare.
- Generatore di border-radius CSSArrotonda gli angoli con gli slider: tutti insieme o uno per uno, in px o %, sintassi ellittica a 8 valori – CSS più breve, anteprima live, pulsante copia.
- Abbinamento font: coppie per titoli e testoCoppie di font per titoli e testo con anteprima live, CSS pronto da copiare e disponibilità su Windows, Mac, iPhone e Android – solo font di sistema.
- Qual è il mio indirizzo IP?Mostra subito il tuo indirizzo IP pubblico, rileva IPv4 o IPv6 e spiega la differenza. Gratis, senza registrazione – il tuo IP non viene mai salvato.
- Calcolatore CSS clampCalcolatore CSS clamp per dimensioni di font e spaziature fluide: inserisci valore minimo, massimo e intervallo di viewport e copia il clamp() pronto.
- Formattare XMLFormattare XML, minificare e verificare con riga e colonna dell’errore, vista ad albero, query XPath e XML in JSON. Nel browser, senza caricare nulla.