Hoe te maken: Responsieve tekst

Responsieve lettergrootte

Tekstgrootte kan worden aangepast met vw Eenheid instellen, wat betekent “viewport breedte”.

Op deze manier past de tekstgrootte zich aan aan de grootte van het browservenster:

<h1 style="font-size:8vw;">Hallo Wereld</h1>
<p style="font-size:2vw;">Pas de grootte van het browservenster aan en zie hoe de lettergrootte schaalt.</p>

Try it yourself

Opmerking:De viewport is de grootte van het browservenster.1vw = 1% van de viewport breedte. Als de viewport breedte 50 centimeter is, dan 1vw is 0.5 centimeter.

Lettergrootte wijzigen met media query

U kunt ook media queries gebruiken om de lettergrootte van elementen op specifieke schermgrootte te wijzigen:

Bekijk het effect

/* Als het schermbreedte 601px of groter is, stel de font-size van <div> in op 80px */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* Als het schermbreedte 600px of kleiner is, stel de font-size van <div> in op 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Try it yourself

Related pages

Tutorial:CSS font

Tutorial:CSS media query