Cosa fa il convertitore da px a rem ed em
Questo strumento converte i valori espressi in pixel (px) nei corrispondenti valori in rem ed em, e viceversa. Può digitare un valore in una qualsiasi delle tre unità e lo strumento calcola automaticamente e mostra i valori equivalenti nelle altre due. È inoltre possibile impostare una dimensione del font radice personalizzata e una dimensione del font di contesto per l'em, così le conversioni restano corrette per le esigenze specifiche del Suo progetto.
Ogni conversione viene eseguita nel Suo browser. Nessun dato inserito viene caricato su BroBroGo.
Come si aggiornano i valori mentre digita
La pagina propone tre campi principali: "Dimensione font radice (px)", "dimensione font di contesto em (px)" e "Valori". Quando modifica uno qualsiasi dei campi px, rem o em, gli altri due si aggiornano mentre digita, esattamente come indicato dal messaggio della pagina: "Inserisca un valore in px, rem o em: gli altri due si aggiorneranno durante la digitazione." Non deve calcolare nulla a mano né confermare in altro modo: il valore inserito viene convertito in tutte e tre le unità.
La dimensione del font radice e la tabella delle conversioni comuni
Il valore rem si basa sulla dimensione del font radice della pagina. Per impostazione predefinita questo campo è impostato su 16px, e inizialmente 16px equivalgono a 1rem e a 1em. Se il Suo progetto usa una radice diversa, può modificare il campo "Dimensione font radice (px)": con una radice di 16px, ad esempio, 32px corrispondono a 2rem e 8px corrispondono a 0,5rem. Il valore inserito in questo campo deve essere un numero maggiore di 0.
Sotto ai campi di conversione trova la tabella "Conversioni comuni px → rem (base 16px)", che mostra una serie di valori in pixel già convertiti in rem partendo da una radice di 16px: una guida rapida da consultare senza dover digitare ogni valore singolarmente.
Il contesto em: perché serve una dimensione separata
L'unità em non si basa sulla radice della pagina, ma sulla dimensione del font dell'elemento in cui viene usata. Per questo motivo lo strumento propone un campo distinto, "dimensione font di contesto em (px)", anch'esso impostato di default su 16px. Se, ad esempio, l'elemento a cui si riferisce ha un font di 20px e il valore da convertire è 30px, il risultato in em sarà 1,5. Anche il valore inserito in questo campo deve essere un numero maggiore di 0.
Valori negativi e messaggi di errore
Lo strumento accetta anche valori in pixel negativi nel campo "Valori". Se invece inserisce in quel campo un valore non valido, compare il messaggio "Inserisca un numero da convertire." Un valore non valido nel campo "Dimensione font radice (px)" produce il messaggio "La dimensione del font radice deve essere un numero maggiore di 0.", mentre un valore non valido nel campo della dimensione di contesto em produce il messaggio "La dimensione del font di contesto em deve essere un numero maggiore di 0."
A chi serve questo convertitore
Questo strumento è utile se deve trasformare valori fissi in pixel in unità relative come rem o em per un progetto responsive, se vuole capire come una dimensione del font radice diversa modifica i valori in rem, se ha bisogno di calcolare un valore in em basandosi sul font di un elemento specifico, oppure se vuole assicurarsi che le dimensioni del Suo layout si adattino correttamente quando chi legge modifica la dimensione del font predefinita del proprio browser.
Domande frequenti
Qual è la differenza tra px, rem ed em?
L'unità px rappresenta una lunghezza fissa. L'unità rem viene calcolata in base alla dimensione del font radice della pagina (con una radice di 16px, 1rem equivale a 16px). L'unità em è invece relativa alla dimensione del font dell'elemento in cui si trova. Definire le dimensioni dei testi e delle spaziazioni in rem consente un ridimensionamento armonioso quando l'utente modifica le impostazioni predefinite del browser.
Perché esiste una dimensione di contesto em separata?
L'unità em è relativa alla dimensione del carattere dell'elemento stesso, che non sempre coincide con la radice (root). Imposti il contesto em sulla dimensione del carattere di quell'elemento per calcolare correttamente il valore em, mantenendolo uguale alla radice quando i due valori coincidono.
Cosa succede se la dimensione del font radice non è 16px?
Può modificare il campo relativo alla dimensione del font radice per adattarlo al Suo CSS: tutti i valori in rem si aggiorneranno all'istante. La tabella rapida riportata di seguito rappresenta una guida utile per la comune radice a 16px da cui parte la maggior parte dei siti.