Prerequisiti: Unità relative: em e rem.
Percentuali e viewport
Percentuali e viewport: fondamenti.
px rappresenta un pixel CSS, non necessariamente un singolo pixel fisico dello schermo. rem è relativo alla dimensione del carattere dell’elemento radice. Per font-size, em è relativo al font del genitore; usato per altre proprietà come padding, è relativo al font dell’elemento stesso. Questa distinzione permette componenti che crescono insieme al testo, ma può anche produrre ingrandimenti cumulativi quando si annidano dimensioni dei caratteri espresse in em.
Come funziona: percentuali e viewport
Percentuali e viewport: comportamento nel browser.
Il significato di una percentuale dipende dalla proprietà. Nel semplice layout a blocchi qui proposto, width: 50% usa come riferimento la larghezza del contenitore. Non assumere che ogni percentuale si riferisca sempre alla stessa dimensione. vw e vh fanno riferimento alle dimensioni del viewport; sulle interfacce mobili l’area visibile può variare con le barre del browser, e CSS offre anche unità come svh e dvh per casi specifici.
Scelte di utilizzo e limiti
Percentuali e viewport: progetto e verifica.
Una larghezza relativa permette di seguire il contenitore; max-width impedisce al testo di diventare troppo largo. clamp(minimo, preferito, massimo) sceglie un valore preferito limitato fra due estremi. Un valore misto con rem e vw può rendere la tipografia fluida mantenendo un contributo legato al testo. Verifica comunque la leggibilità con zoom e finestre diverse: la scelta dell’unità non garantisce da sola un’interfaccia accessibile.
Esempio commentato
Percentuali e viewport: 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>Percentuali e unità del viewport</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<div class="contenitore"><p class="scheda">Ridimensiona la finestra e osserva la larghezza.</p></div>
</body>
</html>
File stile.css
.contenitore { max-width: 800px; }
.scheda {
width: 50%;
font-size: 1.25rem;
padding: 1em;
border: 1px solid;
box-sizing: border-box;
}
Risultato nel browser
Il 50% riguarda la larghezza del contenitore. Con un font radice di 16px, 1.25rem equivale a 20px e il padding di 1em vale 20px.
| Proprietà | Valore nell’esempio | Significato |
|---|---|---|
max-width | 800px | Limite superiore alla larghezza. |
width | 50% | Larghezza secondo box model e contesto. |
font-size | 1.25rem | Dimensione del carattere. |
padding | 1em | Spazio interno fra contenuto e bordo. |
border | 1px solid | Abbreviazione per spessore, stile e colore del bordo. |
box-sizing | border-box | Convenzione per includere o escludere padding e bordo dalle dimensioni dichiarate. |
LABORATORIO
Sperimentare: Percentuali e viewport
Il 50% riguarda la larghezza del contenitore. Con un font radice di 16px, 1.25rem equivale a 20px e il padding di 1em vale 20px.
Obiettivo: Comprendere e applicare percentuali e viewport 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: Misura larghezza del contenitore e della scheda.
- 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.
La scheda occupa metà, poi tre quarti del contenitore. Il padding segue il font della scheda, mentre la larghezza percentuale segue il contenitore.
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 | La scheda occupa metà, poi tre quarti del contenitore. Il padding segue il font della scheda, mentre la larghezza percentuale segue il contenitore. |
| 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
Rendi la scheda larga il 100%, con un limite di 40rem.
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 {
width: 100%;
max-width: 40rem;
box-sizing: border-box;
}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
Percentuali e viewport: interpretazione e applicazione.
Seleziona una domanda per visualizzare la risposta e confrontarla con la tua.
1. Nel layout semplice mostrato, width: 50% si riferisce a che cosa? ▾
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.