Comprensione approfondita della dimensione del carattere (PX vs EM vs REM)

Comprensione della dimensione del carattere

La dimensione del carattere gioca un ruolo molto importante nel web, La dimensione del carattere è una delle proprietà del CSS, La dimensione del carattere o la dimensione del testo definiscono quanto sono grandi i caratteri visualizzati su una pagina web. un font viene in genere misurato in punti (pt) e comunemente definito in pixel (px).

Per impostazione predefinita, la dimensione del carattere di base (dimensione carattere del corpo) di qualsiasi pagina Web è 16px, fino a quando non definiamo una dimensione del carattere personalizzata.
La proprietà della dimensione del carattere viene specificata in uno dei seguenti modi:

1. Dimensione assoluta o dimensione relativa
2. Come lunghezza o percentuale (rispetto alla dimensione del carattere dell'elemento principale)

Sintassi di base

Sintassi di base del carattere

Absolute-Size
xx-small, x-small, small, xx-large, x-large, large
La dimensione del carattere con parole chiave di dimensione assoluta sarà maggiore o minore rispetto alla dimensione del carattere dell'elemento principale.

Relative-Size
più piccolo, più grande

Lunghezza-Size
La dimensione del carattere definita in lunghezza sarà sempre un valore positivo, utilizzate unità relative al carattere come em e px

Percentuale-Size
La dimensione del carattere con percentuale sarà sempre un valore positivo e relativa alla dimensione del carattere dell'elemento principale

Definisci la dimensione del carattere nel corpo

Definire la dimensione del carattere nel corpo è l'approccio migliore per sviluppare qualsiasi pagina web. Impostando la dimensione del carattere di una parola chiave sull'elemento body, è possibile impostare la dimensione relativa del carattere in qualsiasi altro punto della pagina, dandoti la possibilità di ridimensionare facilmente il carattere su o giù su tutta la pagina di conseguenza.

Dimensione carattere in pixel (Px)

Definire la dimensione del carattere in Pixel non è una buona pratica. questo andrà bene solo se stai gestendo il design perfetto dei pixel.
 Pixel (px) è un valore statico, px è indipendente dal sistema operativo e cross-browser che dice ai browser di eseguire il rendering delle lettere esattamente al numero di pixel in altezza specificato. I risultati possono variare leggermente in tutti i browser, poiché ogni browser utilizza algoritmi e approcci diversi per ottenere un effetto simile.
 Quando definisci la dimensione del carattere in pixel (px), potresti dover scrivere alcuni CSS aggiuntivi per gestire la pagina in modo reattivo. e devi scrivere il css in ogni punto di interruzione.

Dimensione carattere in EM

Un altro modo per definire la dimensione del carattere è con i valori em. La dimensione di un valore em è dinamica. quando definiamo la dimensione del carattere in em, dipende dalla dimensione dell'elemento genitore.
 se non abbiamo impostato la dimensione del carattere per il genitore, per impostazione predefinita prenderà la dimensione del carattere del browser, cioè 16px.
 La cosa più importante da sapere con loro è che dipende sempre dalla dimensione del carattere del suo genitore. quindi se stai definendo il carattere in un elemento nidificato, dovresti tenerlo a mente per impostare la dimensione del carattere.

Conversione da pixel a em

Dimensione carattere in REM

I valori rem di dimensione del carattere sono stati inventati per superare il problema di em con elementi nidificati.
 I valori rem della dimensione del carattere sono relativi all'elemento html radice, non all'elemento genitore, resto tutto uguale a em.
 Di seguito è la differenza tra rem ed em se sono presenti elementi nidificati.

Differenza tra elementi nidificati con EM e REM

Elemento nidificato con EMElemento nidificato con REM

Rif: https://developer.mozilla.org/en-US/docs/Web