Prerequisiti: Unità assolute e pixel CSS.
Unità relative al carattere: em e rem
Unità relative al carattere: em e rem: fondamenti.
rem è relativo alla dimensione del font dell’elemento radice. Se il font radice è 16px, 1.5rem vale 24px. Non dare per scontato che la radice abbia sempre quella dimensione: impostazioni dell’utente e regole del foglio possono modificarla. rem permette di mantenere relazioni comuni fra dimensioni senza dipendere da ogni livello della struttura.
Come funziona: unità relative al carattere: em e rem
Unità relative al carattere: em e rem: comportamento nel browser.
Per font-size, em usa come riferimento il font del genitore. Per altre proprietà, come padding, usa invece il font dell’elemento stesso. Con un genitore di 20px e font-size: 1.2em il figlio ottiene 24px; padding: 1em sul figlio vale quindi 24px. Annidare ripetutamente font-size in em può moltiplicare la dimensione a ogni livello.
Scelte di utilizzo e limiti
Unità relative al carattere: em e rem: progetto e verifica.
Scegli rem per una scala condivisa e em quando il componente deve crescere con il proprio testo. Questa scelta non sostituisce la verifica: controlla Computed e prova il componente in genitori con font diversi. È spesso preferibile conservare una base coerente con le impostazioni dell’utente invece di forzare una radice minuscola per facilitare i calcoli.
Esempio commentato
Unità relative al carattere: em e rem: HTML e CSS.
Esempio con stile esterno. Il documento index.html collega il file stile.css mediante il tag link nella head.
Documento HTML completo
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Unità relative: em e rem</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<section class="genitore"><p class="scheda">Testo e spazio relativo.</p></section>
</body>
</html>
File stile.css
.genitore { font-size: 20px; }
.scheda { font-size: 1.2em; padding: 1em; border: 1px solid navy; }
Risultato nel browser
Il paragrafo ha font 24px e padding 24px, perché il primo em si riferisce al genitore e il secondo all’elemento.
| Proprietà | Valore nell’esempio | Significato |
|---|---|---|
font-size | 20px | Dimensione del carattere. |
padding | 1em | Spazio interno fra contenuto e bordo. |
border | 1px solid navy | Abbreviazione per spessore, stile e colore del bordo. |
LABORATORIO
Sperimentare: Unità relative al carattere: em e rem
Il paragrafo ha font 24px e padding 24px, perché il primo em si riferisce al genitore e il secondo all’elemento.
Obiettivo: Comprendere e applicare unità relative al carattere: em e rem attraverso esempi e verifica nel browser.
Software: editor di testo e browser con DevTools; Tempo: 15 minuti.
Preparazione: scarica l’esempio completo e estrai lo ZIP. Apri index.html nel browser. Puoi anche aprire l’esempio online.
Apri il file stile.css nell’editor. Le lezioni iniziali usano un documento già preparato per concentrarsi sulle regole; il collegamento esterno e lo stile interno vengono spiegati nelle lezioni dedicate. Le modifiche nei DevTools sono normalmente temporanee.
Procedura passo passo
- Osserva il punto di partenza: apri l’esempio, confronta markup e regole e individua il selettore o il contesto di layout rilevante.
- Esegui la modifica: Cambia il font del genitore a 25px e misura font e padding del figlio.
- Salva e ricarica la pagina dopo ogni modifica. Confronta gli elementi che devono cambiare con quelli che devono restare invariati.
- Ispeziona il risultato: usa il menu Ispeziona e controlla Styles/Regole e Computed/Calcolato. Per layout Flex o Grid attiva l’overlay, se disponibile.
- Annota causa ed effetto: scrivi il valore o la struttura iniziale, il cambiamento e il risultato. Ripristina il punto di partenza prima dell’esercizio autonomo.
Il figlio passa a 30px e il padding a 30px. Sostituendo font-size con rem il riferimento diventa la radice.
Il font e alcuni dettagli dell’interfaccia dipendono dal browser. Valuta la proprietà e il comportamento descritti, non una corrispondenza perfetta con uno screenshot.
Verifica del risultato
| Controllo | Criterio |
|---|---|
| Effetto specifico | Il figlio passa a 30px e il padding a 30px. Sostituendo font-size con rem il riferimento diventa la radice. |
| Corrispondenza del codice | Individua la dichiarazione o la relazione HTML responsabile della differenza. |
| Persistenza | Riporta la modifica nel file e verifica dopo un ricaricamento. |
| Spiegazione | Motiva la differenza senza affidarti soltanto a uno screenshot. |
Esercizio autonomo
Usa 1.5rem per il font e 0.5em per il padding della scheda.
Consegna: file modificati e una breve spiegazione di selettore, proprietà e risultato. Criterio di riuscita: il cambiamento richiesto funziona dopo il ricaricamento e non taglia informazioni indispensabili.
.scheda { font-size: 1.5rem; padding: 0.5em; border: 1px solid navy; }Integra la soluzione nel punto pertinente: modifica o sostituisci le regole coinvolte invece di accumulare dichiarazioni contraddittorie. Le altre parti dell’esempio restano necessarie.
Verifica dei concetti
Unità relative al carattere: em e rem: interpretazione e applicazione.
Seleziona una domanda per visualizzare la risposta e confrontarla con la tua.
1. A quale font si riferisce rem? ▾
2. Come si interpreta il codice dell’esempio? ▾
3. Quale risultato permette di verificare la modifica del laboratorio? ▾
4. Quale attenzione evita un’interpretazione sbagliata? ▾
Riferimento tecnico: MDN — riferimento CSS. Cerca le proprietà o i selettori utilizzati nell’esempio.