7.1 Principi di base
I font reattivi giocano un ruolo importante nella creazione di un web design adattivo. L'uso di unità relative, come
vw, vh, vmin, e vmax, consente ai font di cambiare dinamicamente in base alle dimensioni
del viewport, garantendo la visualizzazione ottimale del testo su vari dispositivi. Diamo un'occhiata più da vicino a come funzionano queste unità
e come usarle per creare font reattivi.
Concetti di base
vw e vh:
vw(viewport width): 1 unitàvwè pari all'1% della larghezza del viewportvh(viewport height): 1 unitàvhè pari all'1% dell'altezza del viewport
vmin e vmax:
vmin(viewport minimum): 1 unitàvminè pari all'1% della dimensione minore del viewport (o larghezza o altezza)vmax(viewport maximum): 1 unitàvmaxè pari all'1% della dimensione maggiore del viewport (o larghezza o altezza)
Vantaggi dei font reattivi:
- Miglioramento della leggibilità: la dimensione del font si adatta automaticamente alle dimensioni dello schermo, garantendo una lettura confortevole su qualsiasi dispositivo
- Flessibilità del design: i font reattivi aiutano a mantenere un design armonioso ed equilibrato al variare delle dimensioni del viewport
- Approccio unificato: l'uso di unità relative per i font permette di mantenere un approccio unificato nella creazione di un design adattivo
7.2 Esempi di utilizzo di vw e vh
Esempio 1: Dimensione font di base usando vw
Creiamo un esempio in cui la dimensione del font cambia in base alla larghezza del viewport:
body {
font-size: 2vw; /* La dimensione del font è pari al 2% della larghezza del viewport */
}
h1 {
font-size: 4vw; /* La dimensione del font del titolo è pari al 4% della larghezza del viewport */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font reattivo usando vw</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Titolo reattivo</h1>
<p>Questo testo cambia dimensione in base alla larghezza del viewport.</p>
</body>
</html>
Spiegazione del codice:
body { font-size: 2vw; }: imposta la dimensione del font per il testo all'interno delbody, pari al 2% della larghezza del viewporth1 { font-size: 4vw; }: imposta la dimensione del font per il titoloh1, pari al 4% della larghezza del viewport
Esempio 2: Dimensione font di base usando vh
Ora creiamo un esempio in cui la dimensione del font cambia in base all'altezza del viewport:
body {
font-size: 2vh; /* La dimensione del font è pari al 2% dell'altezza del viewport */
}
h1 {
font-size: 4vh; /* La dimensione del font del titolo è pari al 4% dell'altezza del viewport */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font reattivo usando vh</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Titolo reattivo</h1>
<p>Questo testo cambia dimensione in base all'altezza del viewport.</p>
</body>
</html>
Spiegazione del codice:
body { font-size: 2vh; }: imposta la dimensione del font per il testo all'interno delbody, pari al 2% dell'altezza del viewporth1 { font-size: 4vh; }: imposta la dimensione del font per il titoloh1, pari al 4% dell'altezza del viewport
7.3 Esempi di utilizzo di vmin e vmax
Esempio 1: Dimensione font di base usando vmin
Creiamo un esempio in cui la dimensione del font cambia in base alla dimensione minore del viewport:
body {
font-size: 2vmin; /* La dimensione del font è pari al 2% della dimensione minore del viewport */
}
h1 {
font-size: 4vmin; /* La dimensione del font del titolo è pari al 4% della dimensione minore del viewport */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font reattivo usando vmin</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Titolo reattivo</h1>
<p>Questo testo cambia dimensione in base alla dimensione minore del viewport.</p>
</body>
</html>
Spiegazione del codice:
body { font-size: 2vmin; }: imposta la dimensione del font per il testo all'interno delbody, pari al 2% della dimensione minore del viewporth1 { font-size: 4vmin; }: imposta la dimensione del font per il titoloh1, pari al 4% della dimensione minore del viewport
Esempio 2: Dimensione font di base usando vmax
Creiamo un esempio in cui la dimensione del font cambia in base alla dimensione maggiore del viewport:
body {
font-size: 2vmax; /* La dimensione del font è pari al 2% della dimensione maggiore del viewport */
}
h1 {
font-size: 4vmax; /* La dimensione del font del titolo è pari al 4% della dimensione maggiore del viewport */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font reattivo usando vmax</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Titolo reattivo</h1>
<p>Questo testo cambia dimensione in base alla dimensione maggiore del viewport.</p>
</body>
</html>
Spiegazione del codice:
body { font-size: 2vmax; }: imposta la dimensione del font per il testo all'interno delbody, pari al 2% della dimensione maggiore del viewporth1 { font-size: 4vmax; }: imposta la dimensione del font per il titoloh1, pari al 4% della dimensione maggiore del viewport
GO TO FULL VERSION