Wat zijn vh en vw?
Vh en vw zijn maten die zich verhouden tot je viewport. Eén vh is een honderdste van de hoogte, één vw een honderdste van de breedte.
Honderd vh is dus precies een schermhoogte.
Handig voor secties die het hele scherm moeten vullen.
Waarvoor je ze gebruikt
Voor een sfeerbeeld dat het scherm vult, voor ruimte die meeschaalt en voor tekst die zich aan de schermbreedte aanpast.
Meer daarover lees je bij css.
De valkuil op mobiel
Daar verandert de hoogte tijdens het scrollen, doordat de adresbalk verdwijnt. Honderd vh springt dan.
Meer daarover lees je bij mobile first.
De nieuwere varianten
Er bestaan maten die rekening houden met die verdwijnende balk: een kleine, een grote en een dynamische variant.
Meer daarover lees je bij wat de viewport is.
Mijn vuistregels
- Vh voor volledige secties.
- Nooit voor lopende tekst.
- Op mobiel de dynamische variant.
- Altijd een minimumhoogte erbij.
Die tweede voorkomt tekst die op een groot scherm enorm wordt.
Waarom niet voor tekst
Tekst die meeschaalt met je schermbreedte wordt op een televisie onleesbaar groot en op een telefoon te klein.
Meer daarover lees je bij typografie.
Het alternatief
Een functie waarmee je een minimum, een voorkeur en een maximum meegeeft. Dan schaalt het mee binnen grenzen.
Meer daarover lees je bij responsive design.