Converti px in rem, em, pt, pica, pollici e mm usando la dimensione del carattere radice, quella dell’elemento padre e i DPI. CSS fissa 1 in = 96 px = 72 pt.
Di AdminRedatto con strumenti di scrittura basati sull'IAAggiornato Esempi verificati: 7
24px equivale a 1.5rem con carattere radice di 16 px e 96 pixel per pollice.
| Unità | Valore | Definizione |
|---|---|---|
| Pixel (px) | 24px | 1 px |
| Punti (pt) | 18pt | 1 pt = 1/72 in |
| Pica (pc) | 1.5pc | 1 pc = 12 pt = 1/6 in |
| Pollici (in) | 0.25in | 1 in = DPI px |
| Centimetri (cm) | 0.635cm | 1 cm = 1/2.54 in |
| Millimetri (mm) | 6.35mm | 1 mm = 1/25.4 in |
| Quarti di millimetro (Q) | 25.4Q | 1 Q = 0.25 mm |
| em (dimensione del font genitore) | 1.5em | 1 em = parent font size |
| rem (dimensione del font radice) | 1.5rem | 1 rem = root font size |
| Percentuale del font genitore (%) | 150% | 100% = parent font size |
1 px
1 rem = root font size
CSS converte le lunghezze tramite pixel. Le assolute sono fisse: 1 in = 2.54 cm = 96 px = 72 pt = 6 pc; 1 Q è un quarto di millimetro. Le relative dipendono dalla pagina: 1 rem è il carattere radice, 1 em (o 100%) su font-size quello del genitore. Si converte in px e si divide per i px dell'unità di arrivo.
Gli sviluppatori convertono px del progetto in rem per seguire il carattere del lettore: con radice di 16 px, 24 px sono 1.5 rem. Per la stampa si usa pixel per pollice: a 300 DPI un logo di 10 mm richiede circa 118 pixel. Per seguire la preferenza del lettore, anche la dimensione radice deve rispettarla.
Un pollice CSS non deve necessariamente coincidere con quello misurato sullo schermo. CSS definisce 96 px per pollice, e il pixel di riferimento ha un angolo visivo di circa 0.0213°. Le implementazioni possono ancorare le unità assolute a misure fisiche o pixel; mappatura del dispositivo, distanza e scala di stampa influenzano la corrispondenza con il righello.
Nella formula xₛ e xₜ sono origine e destinazione; pₛ e pₜ, pixel per unità di origine e arrivo. I fattori usano caratteri e densità inseriti.
Inserisci valore, unità e dimensioni dei caratteri radice e padre. Con radice di 16 px, 24 px = 1.5 rem; con radice di 20 px, 24 px = 1.2 rem. Lo stesso valore px può quindi corrispondere a un valore rem diverso se cambia il contesto.
| Valore | Origine | Destinazione | Condizione del calcolo | Valore convertito |
|---|---|---|---|---|
| 24 | px | rem | Radice 16 px | 1.5 |
| 24 | px | rem | Radice 20 px | 1.2 |
| 12 | pt | px | 96 pixel/in | 16 |
| 1 | pc | pt | 96 pixel/in | 12 |
| 100 | % | em | Carattere padre 16 px | 1 |
| 10 | mm | px | 300 pixel/in | 118.110236 |
La relazione CSS è 1 in = 96 px = 72 pt. Nella modalità con un'altra densità, l'applicazione conta pixel fisici a quella densità: 10 mm × 300 ÷ 25.4 ≈ 118.110236 px. Ciò non modifica la relazione CSS del browser e non misura automaticamente la lunghezza reale sullo schermo.
Qui em e percentuale usano il carattere padre nel contesto di font-size, mentre rem usa la radice. Altre proprietà possono avere un diverso riferimento percentuale; anche em dipende dal punto d'uso. Zoom e densità del dispositivo non bastano per ricavare una lunghezza fisica.
Fonte di verifica: Verifica dell'esempio: CSS Values 3 §6.1: 1rem = dimensione del carattere radice (16 px valore predefinito del browser); 24 / 16 = 1.5
Fonte di verifica: Verifica dell'esempio: CSS Values 3 §6.2: 1pt = 1/72 in, 1in = 96px; 12 × 96/72 = 16
Fonte di verifica: Verifica dell'esempio: CSS Values 3 §6.2: 1in = 96px
Fonte di verifica: Verifica dell'esempio: 1 rem = dimensione del carattere radice (16 px); 1.5 × 16
16 pixel per impostazione predefinita. Un rem è il carattere html radice, normalmente 16 px nei browser salvo preferenze o html { font-size }. Con questo valore, html { font-size: 62.5% } dà 1 rem = 10 px. W3C CSS Values and Units definisce rem; 16 px è un'impostazione del browser, non della specifica.
Moltiplica i pixel per 0.75; da punti a pixel per 4/3 (circa 1.333). Dalla regola W3C CSS 1 in = 96 px = 72 pt deriva 1 px = 72/96 pt. Testo da 16 px è 12 pt; 11 pt in un elaboratore è circa 14.67 px.
rem usa sempre il carattere radice; em quello corrente, o del genitore su font-size. em si accumula: una lista 1.2em dentro un'altra 1.2em ha testo 1.44 volte la dimensione iniziale, prima dei due livelli di lista. Con radice 16 px, 1.2rem resta 19.2 px a ogni profondità.
Usa rem per seguire la preferenza di carattere del lettore e lascia che anche la dimensione radice la rispetti. Lo zoom amplia px e rem; rem, em e percentuali possono seguire le preferenze attraverso il contesto radice o genitore. Il criterio WCAG 2.1, 1.4.4 (AA), richiede testo ingrandibile al 200% senza perdita di contenuto o funzione. Lo zoom può soddisfarlo con px; rem può inoltre rispettare la preferenza se il contesto radice lo consente.
Un pollice CSS non deve necessariamente coincidere con quello misurato sullo schermo. CSS definisce 1 in = 96 px; il pixel di riferimento W3C è un pixel di schermo a 96 DPI visto da 28 in, angolo di circa 0.0213°. Mappatura e distanza cambiano: un riquadro di 96 px sul telefono può essere più piccolo di un pollice fisico. Nella stampa a dimensione reale, 1 in corrisponde a 25.4 mm; scala e calibrazione influenzano comunque l’uscita.
Questa calcolatrice include 7 esempi svolti con risposte da fonti indipendenti. Fanno parte della suite di test e puoi eseguirli anche qui.