È qui che entrano in gioco ‘rem’ ed ‘em’.
Sono flessibili e si adattano a diverse dimensioni dello schermo.
Molti sviluppatori però si confondono su queste unità.
In questa guida, chiariremo il dibattito ‘rem’ vs ‘em’.
Imparerai come usarle per creare siti web che funzionano bene su tutti i dispositivi.

Unità CSS: I Mattoncini del Web Design

Le unità CSS sono vitali per il web design.
They set the size and place of every part of your page.
Think of them as digital rulers, making sure your headings, text, images, and buttons fit together well.
CSS units come in different types, each with its own uses.

I principali tipi di unità CSS sono fisse e flessibili.

  • Unità fisse, come i pixel (px), non cambiano dimensione.
    Un pixel è sempre un puntino sullo schermo.
    Questo le rende facili da usare, ma possono creare problemi con il design responsivo.
    I siti web devono apparire belli su schermi sia grandi che piccoli.
    Usare solo unità fisse è come costruire una casa con muri rigidi – non gestirà bene i cambiamenti.
  • Unità flessibili cambiano dimensione in base ad altri fattori, come la dimensione dello schermo.
    Si allungano e si restringono per adattarsi a diversi dispositivi, rendendole fantastiche per il design responsivo.

Ci sono anche 4 unità CSS tra cui scegliere:

  • Pixel (px): Dimensione fissa, buona per un controllo esatto
  • Percentuali (%): Flessibili, spesso usate per larghezze e altezze
  • Unità viewport (vw, vh): Dimensione basata sulla finestra del browser
  • ‘rem’ ed ‘em’: Unità flessibili su cui ci concentreremo in questa guida

Scegliere l’unità CSS giusta non riguarda solo l’aspetto.
Influenza quanto è facile da usare e aggiornare il tuo sito web.
Immagina un testo troppo piccolo da leggere su un telefono o un layout disordinato su un tablet.
Questi problemi possono allontanare gli utenti.
Conoscendo i pro e i contro di ogni unità, puoi creare siti web che funzionano bene per tutti.

Cos’è ‘rem.‘

‘rem’ è un’unità CSS flessibile che piace a molti sviluppatori web. Vediamo come funziona e perché è utile.

‘rem’ sta per “root em.”
La dimensione del font è determinata dall’elemento radice della tua pagina web, che di solito è l’elemento <html>.
Ecco come funziona:

  • Se la dimensione del font radice è 16px (comune nella maggior parte dei browser), 1rem equivale a 16px
  • Se cambi la dimensione del font radice a 20px, 1rem equivarrebbe a 20px

Questo legame tra ‘rem’ e la dimensione del font radice lo rende fantastico per design scalabili.

Pensa alla tua pagina web come a un edificio.
L’elemento radice è la fondazione, e tutti gli altri elementi sono blocchi sopra.
Quando usi ‘rem’ per dimensionare qualcosa, stai dicendo: “Rendi questo blocco X volte più grande o più piccolo della fondazione.”

Per esempio:

  1. Imposta la dimensione del font radice a 16px
  2. Rendi un titolo 2rem
  3. Il titolo sarà 32px (2 * 16px)
  4. Se cambi la radice a 20px, il titolo diventa 40px (2 * 20px)

Questo ridimensionamento è ottimo per il design responsivo.
Cambiando la dimensione del font radice per diverse dimensioni dello schermo, puoi facilmente adattare tutto il tuo layout.

Vantaggi dell’Uso di ‘rem’

Usare ‘rem’ ha diversi vantaggi:

  1. Facile Scalabilità: Vuoi cambiare tutte le dimensioni dei font in una volta?
    Basta aggiornare la dimensione del font radice.
    Tutto ciò che usa ‘rem’ si ridimensionerà di conseguenza.
  2. Più Semplice da Mantenere: ‘rem’ rende il tuo codice CSS più pulito e facile da capire.
    Questo aiuta quando lavori con altri o torni al tuo progetto più tardi.
  3. Più Prevedibile: A differenza di ‘em,’ che si basa sulla dimensione del font del suo genitore, ‘rem’ si riferisce sempre alla radice.
    Questo rende più facile prevedere come appariranno le cose.

Quando Usare ‘rem’

‘rem’ è utile in molte situazioni:

  1. Dimensioni dei Font

Ottimo per creare testo facile da leggere su qualsiasi dispositivo. Questa impostazione permette agli utenti di zoomare avanti o indietro, e le dimensioni del testo rimangono proporzionate. Per esempio:

css

				
					html {
  font-size: 16px; /* Base size */
}

h1 {
  font-size: 2rem; /* 32px */
}

p {
  font-size: 1.2rem; /* 19.2px */
}
  1. Dimensionamento degli Elementi

Usa ‘rem’ per larghezze, altezze, margini e padding.
Questo mantiene il tuo layout bilanciato mentre cambiano le dimensioni dello schermo.

  1. Layout Complessivo

Usa ‘rem’ per impostare le larghezze dei contenitori e gli spazi tra le sezioni.
Questo aiuta tutta la tua pagina ad adattarsi uniformemente a schermi diversi.

Usando ‘rem’, puoi creare siti web che si vedono bene e funzionano alla grande su tutti i tipi di dispositivi.

Cos’è ‘em.‘

Mentre ‘rem’ offre una base solida per il design web scalabile, ‘em’ offre un modo diverso per dimensionare gli elementi in base a ciò che li circonda. Vediamo come funziona ‘em’ e dove brilla.

‘em’ prende il nome dalla larghezza della lettera ‘M’ nella stampa vecchio stile. A differenza di ‘rem’, che guarda sempre alla dimensione del carattere dell’elemento radice, ‘em’ prende la sua dimensione dall’elemento genitore. Questo significa:

  • Quando la dimensione del carattere di un elemento genitore è di 16 pixel, 1em del suo figlio sarà anche 16 pixel.
  • Se la dimensione del carattere del genitore cambia, anche i valori ‘em’ del figlio cambieranno.

Questo metodo di ridimensionamento rende ‘em’ perfetto per creare parti di una pagina web che si adattano ovunque le metti.

Pensa a ‘em’ come a un albero genealogico di dimensioni.
Ogni elemento passa la sua dimensione del carattere ai suoi figli, che poi usano quella dimensione per calcolare le proprie misure ‘em’.
Questo può causare un effetto domino, dove cambiare la dimensione del carattere di un elemento influisce su tutti i suoi discendenti.

Diamo un’occhiata a un esempio:

css

				
					.container {
  font-size: 16px;
}

.container h2 {
  font-size: 2em; /* 32px */
}

.container p {
  font-size: 1.2em; /* 19.2px */
}

  1. In questo caso:

    • Gli elementi h2 e p prendono la loro dimensione dal .container.
    • L’h2 sarà il doppio della dimensione del carattere del contenitore (32px).
    • Il p sarà 1,2 volte più grande (19,2px).

    Se cambiamo la dimensione del carattere del .container a 20px, l’h2 e il p si adatteranno automaticamente a 40px e 24px.

    Questo comportamento può essere sia utile che complicato.
    Permette un design flessibile, ma può anche portare a sorprese se non stai attento, specialmente in layout complessi.

    Vantaggi dell’uso di ‘em’

    1. Si adatta al suo ambiente

    ‘em’ brilla nella sua capacità di cambiare dimensione in base al suo elemento genitore.
    Questo è super utile quando vuoi creare parti del tuo sito web che possono adattarsi in posti diversi, ognuno con la sua dimensione del carattere.

    Per esempio, immagina un pulsante che vuoi usare sia nel menu principale che nella barra laterale.
    Il menu potrebbe avere un testo più grande della barra laterale, quindi vuoi che il pulsante cambi dimensione per adattarsi.
    Usando ‘em’ per il padding, la dimensione del carattere e altre misure del pulsante, ti assicuri che sembri bello ovunque lo metti.

    1. Ottimo per costruire blocchi

    ‘em’ funziona bene con il design modulare, dove dividi il tuo sito web in parti riutilizzabili.
    Quando dimensioni gli elementi all’interno di un componente usando ‘em,’ crei un’unità autonoma che si scala in base alla propria dimensione del carattere.
    Questo rende facile usare il componente in diverse parti del tuo sito web senza preoccuparti che sembri fuori posto.

    È come costruire con i blocchi.
    Ogni blocco ha la sua dimensione, ma si incastrano tutti perché sono basati sulla stessa misura.
    Allo stesso modo, ‘em’ ti permette di creare “blocchi” CSS che mantengono il loro equilibrio interno mentre si adattano al quadro più ampio del tuo sito web.

    Questo approccio non solo rende il tuo codice più riutilizzabile e facile da mantenere, ma ti aiuta anche a lavorare in modo più efficiente.
    Puoi concentrarti sul perfezionare ogni componente, sapendo che si adatteranno bene al resto del tuo design.

    Dove usare ‘em’

    ‘em’ è particolarmente utile in situazioni in cui hai bisogno di flessibilità all’interno di parti specifiche del tuo sito web.

    1. Mantenere le proporzioni

    Uno dei principali punti di forza di ‘em’ è aiutare gli elementi all’interno di un componente a rimanere proporzionati tra loro.
    Questo significa che parti di un pulsante o di un menu possono crescere o diminuire insieme quando la dimensione del carattere del componente cambia.
    Questo mantiene tutto in equilibrio, non importa dove usi il componente sul tuo sito.

    Immagina un pulsante con padding e dimensione del carattere impostati in ‘em.’
    Se metti questo pulsante in un contenitore con testo più grande, il pulsante crescerà automaticamente, mantenendo la sua forma e aspetto.
    Questo ti evita di dover aggiustare lo stile del pulsante ogni volta che lo usi in un nuovo posto.

    1. Creare Armonia Tra i Componenti

    L”em’ è anche fantastico per assicurarsi che le diverse parti di un componente stiano bene insieme.
    Usando ‘em’ per cose come margini, padding e persino dimensioni delle immagini, puoi assicurarti che cambino tutti insieme quando cambia la dimensione del font del componente.
    Questo crea un design dove tutte le parti del componente sembrano connesse ed equilibrate.

    Per esempio, pensa a un componente card con un titolo, un’immagine e del testo.
    Se imposti l’altezza dell’immagine e gli spazi intorno agli elementi usando ‘em’, cresceranno o si ridurranno tutti insieme quando cambia la dimensione del font della card.
    Questo mantiene tutto coerente ed evita che qualche parte sembri troppo grande o troppo piccola.

    Diamo un’occhiata a un esempio pratico:

    css

				
					.card {
  font-size: 16px;
}

.card h3 {
  font-size: 1.5em; /* 24px */
  margin-bottom: 0.5em; /* 8px */
}

.card img {
  height: 10em; /* 160px */
  margin-bottom: 1em; /* 16px */
}

.card p {
  font-size: 1em; /* 16px */
  line-height: 1.5em; /* 24px */
}

  1. In questo codice, abbiamo creato un componente card con un titolo, un’immagine e un paragrafo.
    Tutte le dimensioni e gli spazi dentro la card sono impostati usando ‘em’, quindi cambieranno insieme se la dimensione del font della card cambia.
    Questo crea un componente che sembra bello e può adattarsi a diversi usi nel tuo sito web.

    Possibili Sfide con ‘em’

    Mentre ‘em’ offre flessibilità, è importante essere consapevoli di alcune sfide per evitare sorprese nei tuoi layout.

    1. L’Ereditarietà Può Diventare Complicata

    Poiché ‘em’ si basa sull’ereditarietà, a volte può portare a risultati inaspettati, specialmente in strutture HTML complesse.
    Poiché ogni elemento prende la sua dimensione del font dal genitore, i cambiamenti fatti più in alto possono avere effetti sorprendenti più avanti.

    Per esempio, se hai una lista dentro un contenitore che usa ‘em’ per la dimensione del font, cambiare la dimensione del font del contenitore cambierà anche le dimensioni degli elementi della lista.
    Questo potrebbe renderli troppo grandi o troppo piccoli, causando problemi di layout.
    Risolvere problemi di layout può essere più complesso, perché devi fare attenzione a come le dimensioni vengono passate attraverso il tuo HTML.

    2. Il Test è Fondamentale

    Per come funziona ‘em’, è davvero importante testare i tuoi layout a fondo.
    Devi assicurarti che tutto sembri buono in situazioni diverse e quando le dimensioni dei font cambiano.

    Assicurati di controllare il tuo sito web su dispositivi diversi e con diversi livelli di zoom del browser per individuare eventuali problemi di layout.
    Gli strumenti per sviluppatori del browser possono essere davvero utili per esaminare le catene di ereditarietà e trovare la fonte di qualsiasi problema legato a ‘em’.
    Essendo attento e proattivo nei tuoi test, puoi evitare sorprese frustranti e creare un sito web raffinato e facile da usare.

    ‘rem’ vs. ‘em’ Confronto

    Ora che abbiamo esplorato i singoli punti di forza e le particolarità di ‘rem’ e ‘em’, mettiamoli fianco a fianco in un confronto diretto.
    Questo ti darà un’idea migliore di come sono diversi e quando dovresti usare ciascuno.

    Tabella di Confronto Fianco a Fianco

    Caratteristica

    rem

    em

    Definizione

    Relativo alla dimensione del font dell’elemento radice

    Relativo alla dimensione del font dell’elemento genitore

    Ereditarietà

    Non eredita

    Eredita dall’elemento genitore

    Scalabilità

    Eccellente per il ridimensionamento complessivo del sito web

    Buono per il ridimensionamento all’interno dei componenti

    Manutenibilità

    Promuove un codice più pulito e più facile da mantenere

    Può portare a catene di ereditarietà complesse

    Prevedibilità

    Alta prevedibilità nel dimensionamento degli elementi

    Può essere imprevedibile in strutture nidificate

    Ideal Use Cases

    Dimensionamento dei font, dimensionamento degli elementi, layout generale

    Ridimensionamento modulare, dimensionamento relativo all’interno dei componenti

    Vantaggi

    Scalabilità, manutenibilità, prevedibilità

    Ridimensionamento contestuale, flessibilità all’interno dei componenti

    Svantaggi

    Potenziali problemi con elementi nidificati, minor controllo sulle regolazioni di precisione

    Complessità di ereditarietà, potenziale di comportamenti inaspettati

    Scegliere l’Unità CSS Giusta: A Cosa Pensare

    Quando stai costruendo un sito web, scegliere l’unità CSS giusta è importante.
    Ecco cosa dovresti considerare:

    1. Quanto È Grande il Tuo Progetto?

    La dimensione del tuo progetto conta:

    • Siti web grandi: ‘rem’ potrebbe funzionare meglio.
      È più facile da scalare e mantenere ordinato.
    • Progetti piccoli o parti riutilizzabili: ‘em’ potrebbe essere una buona scelta.
      È più flessibile.
    1. Qual È il Tuo Obiettivo di Design?

    Pensa a cosa vuoi ottenere:

    • Il sito web intero sembra bello insieme: ‘rem’ è meglio.
    • Pezzi che possono adattarsi ovunque: ‘em’ potrebbe essere la strada da seguire.

    3. Il Tuo Sito È Facile da Usare per Tutti?

    Fare in modo che il tuo sito funzioni per tutti gli utenti è fondamentale:

    • ‘rem’ è collegato alla dimensione del carattere principale.
      Questo può rendere più facile per gli utenti cambiare la dimensione del testo senza incasinare il layout.
    • ‘em’ può funzionare anche, ma devi stare attento a come cambiano le dimensioni all’interno delle parti del tuo sito.

    4. Il Tuo Sito Funziona su Tutti i Dispositivi?

    Sia ‘rem’ che ‘em’ possono funzionare bene per i siti che hanno un bell’aspetto su tutti gli schermi.
    Ma:

    • ‘rem’ è più prevedibile.
      Si riferisce sempre alla dimensione del carattere principale.
    • ‘em’ può a volte sorprenderti, specialmente in layout complessi.
      Dovrai testarlo di più.

    Usare ‘rem’ e ‘em’ Insieme: Le Migliori Idee

    Non devi per forza sceglierne solo uno. Usare sia ‘rem’ che ‘em’ può rendere il tuo sito ancora migliore. Ecco come:

    1. Inizia con ‘rem’ per le basi: Imposta la dimensione principale del carattere con ‘rem’.
      Questo prepara il terreno per tutto il tuo sito.
    2. Usa ‘em’ per le parti che devono adattarsi ovunque: Per cose come pulsanti o menu, ‘em’ li aiuta ad adattarsi ovunque li metti.
    3. Attieniti a ‘rem’ per le cose grosse: Usa ‘rem’ per il layout principale, come la larghezza delle cose o lo spazio tra le sezioni.
      Mantiene le cose coerenti.
    4. Mischia per le parti annidate: Se hai cose dentro altre cose, prova a usare entrambi.
      Usa ‘em’ per le dimensioni all’interno di un componente e ‘rem’ per qualsiasi cosa che deve corrispondere al layout generale.
    5. Prova cose diverse: Sii coraggioso e sperimenta.
      Prova diversi mix di ‘rem’ e ‘em’ per vedere cosa funziona meglio per il tuo sito.

    Usando ‘rem’ e ‘em’ insieme, puoi creare siti che hanno un bell’aspetto e funzionano bene su tutti i dispositivi.

    Trucchi e Strumenti Fighi

    Mentre migliori con ‘rem’ e ‘em,’ puoi usare alcune tecniche avanzate:

    1. Variabili CSS: Il Tuo Centro di Controllo del Design

    Le variabili CSS ti permettono di memorizzare valori che usi spesso.
    Questo rende molto più facile cambiare il tuo design.

    Ecco come funziona:

    css

				
					:root {
  --main-font-size: 16px;
}

body {
  font-size: var(--main-font-size);
}

h1 {
  font-size: calc(2 * var(--main-font-size));
}

  1. In questo esempio, impostiamo una dimensione del carattere principale e la usiamo per il testo del corpo e per calcolare la dimensione del titolo.
    Se vogliamo cambiare la dimensione più tardi, cambiamo la variabile una volta sola, e tutto si aggiorna!

    2. La Funzione calc(): Fai Matematica nel Tuo CSS

    La funzione calc() ti permette di fare matematica direttamente nel tuo CSS.
    Questo ti dà più controllo sul tuo layout.

    Per esempio, potresti impostare una larghezza della barra laterale così:

    css

				
					.sidebar {
  width: calc(20vw - 20px);
}

  1. Questo rende la barra laterale il 20% della larghezza dello schermo meno 20 pixel.
    Si adatta automaticamente per diverse dimensioni dello schermo.

    3. Elementor: Rendere Facili le Unità CSS

    Se vuoi costruire un sito web senza scrivere direttamente il codice CSS, prova Elementor.
    It’s a visual builder that lets you:

    • Cambia dimensioni e stili con controlli intuitivi
    • Vedi come appare il tuo sito su diversi dispositivi
    • Imposta gli stili per tutto il tuo sito in un unico posto

    Elementor gestisce i calcoli per le unità relative come rem e em così che tu possa concentrarti sul design.

    Errori Comuni e Come Risolverli

    Anche se sai molto su ‘rem’ e ‘em,’ potresti ancora incontrare problemi.
    Ecco alcuni pasticci comuni e come evitarli:

    Mito 1: ‘em’ è Sempre Migliore per l’Accessibilità

    Verità: Sia ‘em’ che ‘rem’ possono funzionare bene per rendere i siti facili da usare.
    ‘rem’ può essere migliore per permettere agli utenti di cambiare la dimensione complessiva del testo.

    Mito 2: ‘rem’ è Solo per le Dimensioni dei Caratteri

    Verità: Puoi usare ‘rem’ per qualsiasi dimensione nella tua pagina – larghezza, altezza, margini e altro.

    Mito 3: ‘em’ è Sempre Imprevedibile

    Verità: Con una buona pianificazione e test, ‘em’ può essere affidabile e flessibile.

    Mito 4: Dovresti Sempre Scegliere Uno Rispetto all’Altro

    Verità: Spesso, usare sia ‘rem’ che ‘em’ insieme funziona meglio.

    Consigli per Risolvere i Problemi

    Se incontri problemi con ‘rem’ o ‘em,’ prova questi consigli:

    1. Controlla la catena delle dimensioni: Usa gli strumenti del tuo browser per vedere quali elementi stanno influenzando le dimensioni.
    2. Cerca stili in conflitto: A volte, altri CSS possono sovrascrivere le tue impostazioni di ‘rem’ o ‘em’.
    3. Prova su dispositivi diversi: Controlla sempre come appare il tuo sito su telefoni, tablet e computer.
    4. Usa variabili CSS e calc(): Questi strumenti possono rendere il tuo CSS più flessibile e facile da gestire.
    5. Prova un costruttore visuale: Strumenti come Elementor possono aiutarti a gestire le dimensioni senza perderti nel codice.

    Conclusione

    Sia ‘rem’ che ‘em’ sono strumenti utili per i web designer. ‘rem’ è fantastico per mantenere coerente l’intero sito, mentre ‘em’ aiuta a creare componenti flessibili.

    Non c’è una risposta giusta universale – la scelta migliore dipende da quello che stai costruendo.
    Capire entrambe le unità ti aiuta a prendere decisioni intelligenti sui tuoi siti web.

    Non aver paura di mischiare ‘rem’ e ‘em’ per ottenere i migliori risultati.
    E se vuoi un modo più facile per progettare, dai un’occhiata a strumenti come Elementor.

    Ricorda, la pratica rende perfetti.
    Più lavori con queste unità, migliore diventerai nel creare siti web fantastici.
    Buon divertimento con il design!