Font reattivi

Disponibile

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 viewport
  • vh (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:

CSS
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 */
}
HTML
<!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 del body, pari al 2% della larghezza del viewport
  • h1 { font-size: 4vw; }: imposta la dimensione del font per il titolo h1, 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:

CSS
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 */
}
HTML
<!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 del body, pari al 2% dell'altezza del viewport
  • h1 { font-size: 4vh; }: imposta la dimensione del font per il titolo h1, 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:

CSS
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 */
}
HTML
<!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 del body, pari al 2% della dimensione minore del viewport
  • h1 { font-size: 4vmin; }: imposta la dimensione del font per il titolo h1, 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:

CSS
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 */
}
HTML
<!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 del body, pari al 2% della dimensione maggiore del viewport
  • h1 { font-size: 4vmax; }: imposta la dimensione del font per il titolo h1, pari al 4% della dimensione maggiore del viewport
1
Compito
Frontend SELF IT,  livello 26lezione 1
Bloccato
Utilizzo di vh
Utilizzo di vh
1
Compito
Frontend SELF IT,  livello 26lezione 1
Bloccato
Utilizzo di vmax
Utilizzo di vmax
Commenti
  • Popolari
  • Nuovi
  • Vecchi
Devi avere effettuato l'accesso per lasciare un commento
Questa pagina non ha ancora commenti