CSS Academy · Lezione

Unità relative: em e rem

Dimensionate gli elementi rispetto alle dimensioni del carattere dell'elemento padre o della radice utilizzando le unità em e rem.

Unità relative: em e rem è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

Che cosa sono le unità relative?

Le unità relative si basano su un'altra misura, generalmente la dimensione dei caratteri di un elemento o dell'elemento radice. Consentono di creare design scalabili e adattivi che rispettano le impostazioni dell'utente.

em — Relativa alla dimensione dei caratteri del genitore

em è relativa alla dimensione dei caratteri dell'elemento corrente (per la proprietà font-size stessa) o dell'elemento genitore (per le altre proprietà). Questo può causare un effetto cumulativo.

<div class="parent">
    Parent (20px)
    <div class="child">
      Child (1.5em = 30px)
      <div class="grandchild">Grandchild (1.5em = 45px!)</div>
    </div>
  </div>

em per la spaziatura

Quando em viene utilizzata per padding, margin o border-radius, è relativa alla dimensione dei caratteri dell'elemento stesso. In questo modo si creano componenti che si ridimensionano proporzionalmente.

<button class="button">Padded Button</button>

rem — Relativa alla dimensione dei caratteri della radice

rem (root em) è relativa alla dimensione dei caratteri dell'elemento radice (html). Non si accumula mai ed è prevedibile in tutta la pagina.

<h1>Heading (2.5rem = 40px)</h1>
  <p>Paragraph text (1rem = 16px)</p>
  <small>Small print (0.75rem = 12px)</small>

rem e accessibilità dell'utente

Se l'utente aumenta la dimensione base dei caratteri del browser (ad esempio da 16px a 20px per una migliore leggibilità), le unità rem si adattano di conseguenza. Le unità fisse px no. Per questo motivo, rem è fortemente consigliata per la tipografia.

font-size di html in percentuale

Imposti la dimensione dei caratteri della radice come percentuale per rispettare le impostazioni del browser dell'utente:

<p>Root font-size respects the browser/user default (100%).</p>

Scegliere tra em e rem

Guida pratica:

Utilizzi rem per le dimensioni dei caratteri, i token di spaziatura e le misure del layout
Utilizzi em per la spaziatura interna dei componenti che deve adattarsi alla dimensione dei caratteri del componente (ad esempio il padding di un pulsante)

em nelle media query

Le media query espresse in em rispondono alle variazioni della dimensione dei caratteri del browser. Un breakpoint di 48em equivale a 768px con le impostazioni predefinite, ma si adatta se l'utente ha modificato la dimensione base dei caratteri.

<div class="layout">
    <div>Column A</div>
    <div>Column B</div>
  </div>

Calcolare em

La formula è: desired px / parent px = em value. Se il genitore è 16px e si desidera un testo di 24px: 24/16 = 1.5em.

<h2>Heading (24px via 1.5rem)</h2>
  <p>Paragraph (18px via 1.125rem)</p>

Il problema dell'accumulo di em

Annidare elementi con dimensioni in em fa sì che la dimensione dei caratteri si accumuli moltiplicativamente. Per questo motivo, per la dimensione dei caratteri si preferisce rem: fa sempre riferimento alla radice, impedendo l'accumulo.

ch — Larghezza del carattere

L'unità ch equivale alla larghezza del carattere "0" nel font corrente. È utile per limitare i contenitori di testo a lunghezze di riga leggibili:

<p class="article-body">This paragraph is constrained to about 70 characters per line using the ch unit, which keeps text at a comfortable, readable line length regardless of font size.</p>

Verifica rapida

Un pulsante ha font-size: 1.25rem e padding: 0.5em. Se la dimensione dei caratteri della radice è 16px, a quanti pixel corrisponde il padding?

Riepilogo

em si ridimensiona in relazione alla dimensione dei caratteri dell'elemento corrente (o del genitore per la proprietà font-size stessa) e può accumularsi. rem si ridimensiona sempre in relazione alla radice e non si accumula mai. Utilizzi rem per la tipografia e la spaziatura globale; utilizzi em per la spaziatura interna proporzionale dei componenti.

Domande Frequenti

La lezione «Unità relative: em e rem» è gratuita?

Sì — il testo completo di «Unità relative: em e rem» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «Unità relative: em e rem»?

Dimensionate gli elementi rispetto alle dimensioni del carattere dell'elemento padre o della radice utilizzando le unità em e rem. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Unità relative: em e rem»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione CSS Academy?

Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a CSS Academy