Convertitore da PX a REM

Come usare il convertitore da PX a REM

1. Imposta la Dimensione font radice (px). È 16 in tutti i principali browser, a meno che il tuo foglio di stile non la cambi. I pulsanti sotto il campo passano a 16 px, 10 px (il trucco html { font-size: 62.5%; }) o 18 px.
2. Se lavori con gli em, imposta la Dimensione font del genitore per em (px): la dimensione del font calcolata dell’elemento che contiene quello a cui stai dando lo stile.
3. In Converti un valore, scrivi in Pixel (px), REM o EM. Gli altri due campi si aggiornano mentre scrivi e la riga sotto mostra la divisione usata.
4. La Tabella di conversione multipla elenca le dimensioni più comuni. Sostituisci i Valori in pixel con i tuoi design token (scala delle spaziature, scala tipografica…) e usa Copia tabella per incollare il risultato in un foglio di calcolo o in un documento di design.
5. Per migrare codice esistente, incollalo in CSS da convertire, scegli le opzioni e clicca su Converti px in rem. Carica un esempio mostra un piccolo foglio di stile. Copia il CSS convertito con Copia.

Le formule

• rem = px ÷ dimensione del font radice. Con i 16 px predefiniti, 24px = 24 ÷ 16 = 1,5rem.
• em = px ÷ dimensione del font del genitore. Dentro un titolo da 20 px, 10px = 0,5em.
• px = rem × dimensione del font radice, e px = em × dimensione del font del genitore.

rem o em: quale usare?

rem (“root em”) si riferisce sempre alla dimensione del font dell’elemento html, quindi 1.5rem ha lo stesso valore in tutta la pagina. È la scelta più sicura per dimensioni del testo, spaziature, larghezze massime e distanze del layout.

em si riferisce alla dimensione del font dell’elemento stesso (per font-size, a quella del genitore). Si moltiplica: un elenco a 0.9em annidato tre volte finisce a 0,9 × 0,9 × 0,9 = 73 % della base. Per questo gli em sono comodi per ciò che deve scalare con il proprio testo (il padding di un pulsante, l’icona accanto a un’etichetta) e rischiosi per la tipografia globale.

Perché i rem contano per l’accessibilità

Molte persone aumentano la dimensione predefinita del font nelle impostazioni del browser (per esempio da 16 a 20 o 24 px) invece di ingrandire ogni pagina. Le dimensioni scritte in px ignorano questa preferenza; quelle in rem o em la seguono. Usare i rem per testo e spaziature fa crescere l’intero layout secondo la scelta di chi legge, il che aiuta a rispettare il criterio di successo 1.4.4 delle WCAG 2.2 (ridimensionamento del testo fino al 200 %).

Per lo stesso motivo, evita di impostare html { font-size: 16px; } in px: usa una percentuale (100%, o 62.5% se vuoi 1rem = 10px), così l’impostazione dell’utente continua a valere.

Cosa cambia il convertitore CSS

Sostituisce i numeri seguiti da px nelle dichiarazioni con il valore diviso per la dimensione del font radice. Non tocca mai commenti, stringhe o valori url().

• Mantieni in px lo spessore di bordi e outline: border, border-*-width, outline, outline-offset e column-rule restano in px, così le linee sottili restano nitide. border-radius viene comunque convertito.
• Mantieni i valori da 1px: qualsiasi valore tra −1px e 1px resta invariato.
• Converti le media query in em (base 16px): nelle condizioni @media, rem ed em si riferiscono sempre alla dimensione iniziale del font del browser, mai alla tua regola html, quindi lo strumento divide per 16 e scrive em, qualunque sia la tua dimensione radice. Se l’opzione è disattivata, le media query mantengono i px.