Come si usa
- Nella scheda CSS, imposta Dimensione font radice con il valore in px usato nel tuo progetto.
- Scegli px → rem oppure rem → px in Direzione.
- Seleziona Tutte le proprietà oppure Solo proprietà dei font in Proprietà.
- Imposta Precisione con il numero massimo di decimali desiderato.
- Incolla il foglio di stile nell’editor di ingresso della scheda CSS per ottenere il codice convertito.
Esempi
Convertire spaziature mantenendo i bordi sottili
.scheda-prodotto {
padding: 24px;
gap: 12px;
border: 1px solid #ddd;
}.scheda-prodotto {
padding: 1.5rem;
gap: 0.75rem;
border: 1px solid #ddd;
}Convertire solo le proprietà dei font
.titolo-articolo {
font-size: 28px;
line-height: 36px;
letter-spacing: 0.5px;
margin-bottom: 20px;
}.titolo-articolo {
font-size: 1.75rem;
line-height: 2.25rem;
letter-spacing: 0.03rem;
margin-bottom: 20px;
}Riportare un menu da rem a px
.menu-principale {
font-size: 1rem;
padding: 0.75rem 1.5rem;
gap: 0.5rem;
}.menu-principale {
font-size: 16px;
padding: 12px 24px;
gap: 8px;
}Suggerimenti
- Riordina il file convertito con il CSS Formatter.
- Riducine il peso con il CSS Minifier.
Domande frequenti
Quanti pixel sono 1 rem?
1 rem corrisponde alla dimensione del font dell’elemento radice html: con una radice di 16px, vale 16px. Per passare da rem a px moltiplica per la dimensione radice; per passare da px a rem dividi.
Qual è la differenza tra rem ed em nel convertitore?
Il calcolo dei rem usa Dimensione font radice; quello degli em usa Dimensione font del genitore per em. Il valore del genitore segue quello della radice finché non lo modifichi manualmente.
Vengono convertiti anche i valori nelle media query?
Solo se attivi Converti le media query, che include anche i parametri di @container. Nelle media query, i rem dipendono dalla dimensione predefinita del browser, non dal font radice impostato nel CSS.
Devo controllare le espressioni calc() dopo la conversione?
Controlla soprattutto quelle che contengono 0px: il convertitore lo sostituisce con 0 anche dentro calc(). Sommare questo zero senza unità a una lunghezza può rendere l’espressione non valida.
Il mio CSS viene inviato a un server o salvato?
La conversione avviene nel browser: valori e CSS non vengono inviati né salvati dal codice dello strumento. Nel browser vengono conservate solo le impostazioni e l’ultima scheda usata. La pagina usa Google Analytics per eventi di utilizzo, senza includere valori o CSS.