Come creare: testo responsive

Dimensione del font responsive

La dimensione del testo può essere vw Impostazione dell'unità, il cui significato è “larghezza della viewport”.

Così, la dimensione del testo seguirà la dimensione della finestra del browser:

<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">Modifica la dimensione della finestra del browser per vedere come cambia la dimensione del font.</p>

Prova personalmente

Nota:la viewport è la dimensione della finestra del browser.1vw = 1% della larghezza della viewport. Se la larghezza della viewport è di 50 centimetri, allora 1vw per 0,5 centimetri.

Modifica la dimensione del font utilizzando le query media

Puoi anche utilizzare le query media per modificare la dimensione del font degli elementi per determinate dimensioni dello schermo:

Visualizza l'effetto

/* Se la larghezza dello schermo è 601px o superiore, impostare la dimensione del font di <div> a 80px */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* Se la larghezza dello schermo è 600px o inferiore, impostare la dimensione del font di <div> a 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Prova personalmente

Pagine correlate

Tutorial:Font CSS

Tutorial:Query media CSS