Week 5 — Responsive design
Wat laat dit voorbeeld zien?
Drie kaarten die naast elkaar staan op een breed scherm, maar automatisch
onder elkaar komen te staan (en van kleur veranderen, puur om het verschil
goed zichtbaar te maken) zodra het scherm smaller is dan 600px.
Maak je browservenster smaller om het effect te zien,
of open de devtools (F12) en schakel naar het mobiel-formaat.
Voorbeeld: responsive kaarten
Desktop
Kaarten staan naast elkaar.
Tablet
Nog steeds naast elkaar.
Mobiel
Kaarten schuiven onder elkaar < 600px.
Hoe werkt dit?
- De
<meta name="viewport">-regel in de<head>zorgt dat mobiele browsers de pagina niet automatisch verkleinen. @media (max-width: 600px) { ... }incss/style.csspast de stijl alleen aan op smalle schermen.- De kleurverandering hierboven is puur om het effect duidelijk te maken — in een echt project pas je vaak alleen de indeling aan.