Come fare per - Testo reattivo
Scopri come creare una tipografia reattiva con CSS.
Ciao mondo
Ridimensiona la finestra del browser per vedere come si ridimensiona la dimensione del carattere.
Dimensione carattere reattivo
La dimensione del testo può essere impostata con vw
un'unità, che significa "larghezza finestra".
In questo modo la dimensione del testo seguirà la dimensione della finestra del browser:
Esempio
<h1 style="font-size:8vw;">Hello World</h1>
<p
style="font-size:2vw;">Resize the browser window to see how the font size
scales.</p>
Viewport è la dimensione della finestra del browser. 1vw = 1% della larghezza della finestra. Se il viewport è largo 50 cm, 1vw è 0,5 cm.
Modifica la dimensione del carattere con le query multimediali
Puoi anche utilizzare le query multimediali per modificare la dimensione del carattere di un elemento su dimensioni dello schermo specifiche:
Dimensione carattere variabile.
Esempio
/* If the screen size is 601px wide or
more, set the font-size of <div> to 80px */
@media screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px wide or less,
set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Suggerimento: vai al nostro tutorial sui font CSS per saperne di più sui font.
Per saperne di più sulle media query, leggi il nostro tutorial CSS Media Query .