Hoe OM - Responsiewe teks
Leer hoe om responsiewe tipografie met CSS te skep.
Hello Wêreld
Verander die grootte van die blaaiervenster om te sien hoe die lettergrootte skaal.
Responsiewe lettertipegrootte
Die teksgrootte kan met 'n vw
eenheid gestel word, wat die "kykpoortwydte" beteken.
Op hierdie manier sal die teksgrootte die grootte van die blaaiervenster volg:
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 die grootte van die blaaiervenster. 1vw = 1% van kykpoortwydte. As die uitsigpoort 50 cm breed is, is 1vw 0,5 cm.
Verander lettergrootte met medianavrae
Jy kan ook medianavrae gebruik om die lettergrootte van 'n element op spesifieke skermgroottes te verander:
Veranderlike 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;
}
}
Wenk: Gaan na ons CSS Font Tutoriaal om meer te wete te kom oor lettertipes.
Om meer te wete te kom oor medianavrae, lees ons CSS Medianavrae Tutoriaal .