Hoe - Responsieve tekst
Leer hoe u responsieve typografie maakt met CSS.
Hallo Wereld
Wijzig het formaat van het browservenster om te zien hoe de lettergrootte wordt geschaald.
Responsieve lettergrootte
De tekstgrootte is in te stellen met een vw
eenheid, oftewel de "viewport width".
Op die manier volgt de tekstgrootte de grootte van het browservenster:
Voorbeeld
<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 is de grootte van het browservenster. 1vw = 1% van de breedte van de viewport. Als de viewport 50 cm breed is, is 1vw 0,5 cm.
Lettergrootte wijzigen met mediaquery's
U kunt ook mediaquery's gebruiken om de lettergrootte van een element op specifieke schermformaten te wijzigen:
Variabele lettergrootte.
Voorbeeld
/* 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;
}
}
Tip: Ga naar onze CSS Font Tutorial voor meer informatie over lettertypen.
Lees onze CSS Media Queries Tutorial voor meer informatie over mediaquery's .