Vai al contenuto
TextArray
100% locale

Convertitore di unità CSS

Converti lunghezze CSS tra px, rem, em, pt e % rispetto a qualsiasi dimensione del carattere root.

Ingresso
Uscita

Convertitore di unità CSS

Incolla i valori CSS uno per riga — 16px, 1.5rem, 12pt, 150% — e questo convertitore li traduce istantaneamente. Un numero nudo viene letto nell'unità impostata dalla selezione Da, mentre un'unità scritta nella riga vince sempre, quindi puoi mescolare pixel e rem in un unico elenco. Scegli un bersaglio in A oppure scegli Tutte le unità per vedere l'intera catena a colpo d'occhio: 16px = 1rem = 12pt = 100%. Le righe che non sono valori semplici passano senza modifiche, quindi un commento vagante non interrompe mai la corsa.

I calcoli dipendono da un numero: la dimensione di base, la dimensione del carattere radice in pixel. Per impostazione predefinita i browser sono 16px, motivo per cui 1rem di solito equivale a 16px e 100% equivale alla base. Imposta la base su 10 per il classico trucco del 62,5% in cui 1,5rem è 15px, oppure abbina un sistema di progettazione con una radice diversa. I punti sono fissati dal CSS stesso: 1px è 1/96 di pollice e 1pt è 1/72, quindi 16px è esattamente 12pt indipendentemente dalla base. L'opzione decimali limita la precisione fino a sei cifre, con gli zeri finali tagliati.

Rem è l'unità di facile accessibilità: si adatta alla preferenza della dimensione del carattere del browser del lettore, quindi il testo impostato in rem cresce quando qualcuno aumenta la dimensione predefinita, mentre px rimane fisso. Em usa qui la stessa matematica, ma in un foglio di stile reale è relativo alla dimensione del carattere dell'elemento, quindi i valori em nidificati sono composti dove rem no: questo convertitore presuppone il caso piatto, relativo alla radice.

Tutto viene eseguito localmente nel tuo browser: nulla viene caricato e non c'è niente da aspettare. Copia l'elenco convertito o scaricalo come file .txt.

FAQ

Perché usare rem invece di px?
I valori Rem si adattano alla dimensione del carattere impostata dal lettore nel browser, quindi le persone che necessitano di testo più grande lo ottengono effettivamente. I valori Px ignorano questa preferenza. Convertire un progetto basato su px in rem è una delle soluzioni di accessibilità più economiche che ci siano.
Qual è la dimensione di base e perché è impostata su 16 per impostazione predefinita?
È la dimensione del carattere radice in pixel: a cosa si riferiscono 1rem, 1em e 100%. Tutti i principali browser vengono forniti con un valore predefinito di 16px, quindi 16 è la base corretta a meno che il foglio di stile non modifichi la radice, ad esempio html { font-size: 62.5% } che rende la base 10.
Qual è la differenza tra em e rem?
Rem è sempre relativo alla dimensione del carattere radice; em è relativo all'elemento corrente, quindi i valori em nidificati si moltiplicano. Questo convertitore tratta entrambi rispetto alla dimensione di base singola: la custodia piatta. Nel markup profondamente annidato, i valori em reali possono differire.
Cosa succede alle linee che non sono valori?
Passano all'output senza modifiche e il conteggio li conta come saltati. Vengono convertiti solo valori semplici come 16px, 1.5rem o un semplice numero: le dichiarazioni CSS complete non rientrano nell'ambito.
Il mio testo è caricato da qualche parte?
No. Lo strumento funziona interamente nel tuo browser e il tuo input non lascia mai il tuo dispositivo.