straighten Convertitore PX ↔ REM ↔ EM ↔ PT star

Come Funziona

rem = px ÷ dimensione radice (16px di default, quindi 24px = 1,5rem); em funziona allo stesso modo ma rispetto alla dimensione del font ereditata dall'elemento stesso — il campo "dimensione di contesto" del convertitore; pt è l'unità di stampa, dove 1pt = 1,333px (96dpi ÷ 72). Digita in un campo qualsiasi e gli altri seguono automaticamente.

Esempio pratico: su una base di 16px, un titolo di 1,25rem viene renderizzato a 20px. Annida un'etichetta di 0,875em dentro un componente la cui dimensione del font è 1,125rem (18px), e verrà renderizzata a 15,75px — perché em si moltiplica rispetto al genitore immediato, non alla radice.

Cosa Sapere

• rem è relativo all'elemento radice, non a un valore predefinito fisso del browser. L'assunzione dei 16px vale solo se nessuno l'ha modificata. Se un utente aumenta la dimensione del font predefinita del browser nelle impostazioni di accessibilità — comune tra le persone ipovedenti — ogni valore basato su rem si ridimensiona proporzionalmente insieme ad essa. I valori in pixel no: un paragrafo di 16px resta 16px indipendentemente dalla preferenza del browser dell'utente.
• Per questo le linee guida sull'accessibilità preferiscono rem per la dimensione del font e la spaziatura. Un layout costruito in rem rispetta la dimensione del testo scelta dall'utente end-to-end — titoli, corpo del testo e la spaziatura circostante crescono tutti insieme, mantenendo il design proporzionato invece di rompersi quando il testo si ingrandisce.
• em è relativo alla propria nidificazione, che si accumula. Un valore di 1,5em dentro un altro elemento di 1,5em viene renderizzato a 2,25× la radice — utile per componenti che devono ridimensionarsi con il proprio contesto di dimensione del font (come il padding di un pulsante), rischioso per qualsiasi cosa annidata su più livelli.
• Il vecchio "trucco del 62,5%" — impostare la radice a 10px in modo che 1rem = 10px, per facilitare il calcolo mentale — funziona ancora ma vale la pena evitarlo nei nuovi progetti: la maggior parte delle librerie di componenti presuppone una radice di 16px, e sovrascriverla può produrre dimensioni impreviste nel codice di terze parti.
• pt è definito rispetto a px, non viceversa. Il CSS fissa il rapporto a 1in = 96px = 72pt, quindi 1pt = 96/72 = esattamente 1,333px. Questo conta soprattutto quando si esporta un design per la stampa o il PDF, dove pt è l'unità nativa — la conversione mantiene coerenti le dimensioni a schermo e quelle stampate.