Convertitore da PX a EM (Predefinito 16px)

PX a EM:

Formula: (Valore in Pixel) / (Dimensione del carattere di base) = valore EM

Esempio: 32px / 16px = 2 EM

Tabella di conversione da PX a EM

Pixel (px)EM
80.5
120.75
161
201.25
241.5
322

Unità CSS: Pixel vs. EM

  • Pixel (px): I pixel sono unità assolute in CSS. Rappresentano una dimensione fissa sullo schermo, indipendentemente dal dispositivo o dalla risoluzione dello schermo. L’uso dei pixel offre un controllo preciso sulle dimensioni degli elementi.
  • EM (em): Gli EM sono unità relative. La loro dimensione dipende dalla dimensione del carattere del loro elemento genitore. La dimensione predefinita del carattere nella maggior parte dei browser è 16px, quindi 1em è inizialmente uguale a 16px. Gli EM sono utili per creare design scalabili e responsive.

Perché convertire da PX a EM?

  1. Accessibilità: Gli utenti possono ridimensionare il testo nei loro browser. I design che usano gli EM si scalano proporzionalmente con queste regolazioni della dimensione del testo, rendendoli più accessibili agli utenti con problemi visivi.
  2. Reattività: Gli EM aiutano a creare layout che si adattano facilmente a diverse dimensioni dello schermo. Dato che gli EM sono basati sulle dimensioni dei caratteri, gli elementi si ridimensioneranno naturalmente al cambiare del viewport (l’area visibile di un sito web).
  3. Flessibilità: Gli elementi nidificati che usano gli EM ti permettono di controllare facilmente le relazioni di dimensionamento in tutto il design. Alterare la dimensione del carattere di base influenza in modo prevedibile tutti gli elementi che usano gli EM.

La formula di conversione

Per convertire i pixel in EM, usa la seguente formula:

EM = Pixel / Dimensione del carattere di destinazione (in pixel)

Esempio:

Se vuoi convertire 24px in EM, e la tua dimensione del carattere di base è 16px (predefinita standard):

  • EM = 24px / 16px = 1.5em

Nota importante: In layout più complessi, se l’elemento genitore stesso ha la sua dimensione del carattere impostata usando gli EM, i calcoli diventano più coinvolti poiché gli EM nidificati sono relativi al loro genitore immediato.

Considerazioni pratiche

  • Dimensione del carattere di base: È comune impostare una dimensione del carattere di base sull’elemento html o body. Tutti i calcoli degli EM sono poi basati su questo valore.
  • Mischiare le unità: Mentre gli EM promuovono l’adattabilità, spesso si usa un mix di px ed EM per un controllo più fine in certe situazioni.
  • REM: Un’altra unità relativa, i REM, si basa sulla dimensione del carattere radice (di solito l’elemento html). Possono semplificare i calcoli in layout complessi.