CSS Media Queries Basiskennis
Leer hoe je websites responsive maakt met CSS media queries. Een praktische gids voor echte, werkende code die je ook nog kan onderhouden.
Wat zijn media queries eigenlijk?
Media queries zijn het hart van responsive webdesign. Ze stellen je in staat om CSS-regels toe te passen op basis van de schermgrootte, apparaatoriëntatie en andere kenmerken van het apparaat van je bezoeker. Zonder media queries zou je website er op een smartphone hetzelfde uitzien als op een grote monitor — en dat werkt niet.
De basisformule is simpel: je schrijft normale CSS, en dan zeg je tegen de browser: “Pas deze regels alleen toe als aan deze voorwaarde voldaan is.” Bijvoorbeeld: “als het scherm kleiner is dan 768 pixels, maak de tekst dan iets groter zodat het nog leesbaar is.”
De basisstructuur van een media query
Een media query begint altijd met het @media-keyword, gevolgd door een voorwaarde. Dit is hoe je het schrijft:
@media (max-width: 768px) { .element { font-size: 16px; }
}
Dit zegt: “Als het scherm 768 pixels of kleiner is, pas deze stijl toe.” Je kan ook min-width gebruiken voor grotere schermen, of beide combineren. We werken met breakpoints — dat zijn de schermgroottes waar je je layout aanpast.
De meeste designers werken met drie standaard breakpoints: mobiel (onder 768px), tablet (768px tot 1024px) en desktop (boven 1024px). Maar je kan net zoveel breakpoints maken als je nodig hebt. Het hangt af van je ontwerp.
Mobile-first: het juiste uitgangspunt
Er’s een grote kans dat je verkeerd bezig bent. Veel developers schrijven eerst CSS voor grote schermen, en voegen daarna media queries toe voor kleine schermen. Dat werkt, maar het’s inefficiënt.
Mobile-first betekent: je schrijft eerst CSS voor mobiele apparaten. Dan voeg je media queries toe met min-width om de layout aan te passen voor grotere schermen. Dit is beter omdat:
- Je website standaard snel laadt op mobiel
- Je minder CSS hoeft te overriden
- Je layout automatisch schaalbaar is
- Je minder bugs in je responsive code krijgt
Praktische voorbeelden die je meteen kan gebruiken
Voorbeeld 1: Flexbox layout aanpassen
Stel je hebt een rij met drie kolommen op desktop. Op mobiel wil je dat deze onder elkaar staan.
.container { display: flex; flex-wrap: wrap; gap: 20px; }
.item { flex: 1 1 100%; } @media (min-width: 768px) { .item {
flex: 1 1 calc(50% - 10px); } } @media (min-width: 1024px) {
.item { flex: 1 1 calc(33.333% - 14px); } }
Dit code-voorbeeld is eenvoudig maar krachtig. Op mobiel nemen de items volle breedte, op tablet de helft, op desktop een derde. Zo kan je zelf bepalen hoe je layout zich aanpast.
Voorbeeld 2: Typografie schalen
Tekst die op desktop mooi is, is op mobiel te groot. Media queries helpen:
h1 { font-size: 18px; line-height: 1.4; } @media (min-width:
768px) { h1 { font-size: 24px; line-height: 1.3; } } @media
(min-width: 1024px) { h1 { font-size: 36px; line-height: 1.2;
} }
Dit zorgt ervoor dat je koppelingen op elk apparaat leesbaar blijven. Je kan ook line-height aanpassen — op grotere schermen kan het tighter.
Meer dan alleen schermgrootte
Media queries kunnen veel meer dan alleen schermgrootte checken. Je kan ook kijken naar:
Orientatie
@media (orientation: landscape) { } — Controleert of het apparaat liggend of staand wordt gehouden.
Pixel ratio
@media (-webkit-min-device-pixel-ratio: 2) { } — Voor retina-schermen. Nuttig als je afbeeldingen wil optimaliseren.
Donker modus
@media (prefers-color-scheme: dark) { } — Detecteert of de gebruiker donker modus aan heeft staan. Dit is steeds populairder.
Beweging
@media (prefers-reduced-motion: reduce) { } — Voor gebruikers die geen animaties willen. Dit is belangrijk voor toegankelijkheid.
Vier dingen om mee te nemen
Begin met mobiel
Schrijf je CSS eerst voor kleine schermen. Voeg dan media queries toe met min-width voor grotere schermen. Dit is sneller en cleaner.
Kies slimme breakpoints
Je hoeft niet aan de standaard breakpoints te houden. Kijk waar je design breekt en plaats breakpoints daar. Dat werkt veel beter.
Test op echte apparaten
Browser dev tools zijn handig, maar testen op echte telefoons is veel beter. Dat geeft je veel meer inzicht in hoe je website echt gebruikt wordt.
Hou het onderhoudbaar
Organiseer je media queries goed. Hou ze bij elkaar, of plaats ze onder elke selector. Zorg dat je toekomstige jezelf bedankt.
Media queries zijn niet ingewikkeld
Je hebt nu de basis van CSS media queries geleerd. Het klinkt misschien ingewikkeld, maar het is eigenlijk heel logisch: je schrijft CSS, je voegt een voorwaarde toe, klaar. De kracht zit in het detail — hoe je breakpoints kiest, hoe je je layout aanpast, hoe je denkt aan verschillende apparaten.
Het verschil tussen een website die eruitziet als een mobiele app op een smartphone en een website die “gewoon verkleind” is, is meestal gewoon goed gebruik van media queries. Start klein, denk mobile-first, test veel, en je krijgt het zeker voor elkaar.
Pro tip: Gebruik DevTools in Chrome of Firefox om je media queries live te testen. Open DevTools, klik op de device toggle, en je kan meteen zien hoe je website er op verschillende schermen uitziet. Veel makkelijker dan constant je scherm te resizen.
Lees ook deze artikelen
Over dit artikel
Dit artikel biedt informatief materiaal over CSS media queries en responsive webdesign. De voorbeelden en technieken die hier beschreven staan zijn gebaseerd op standaard CSS-praktijken en huidige best practices. Elke website is anders, en wat hier uitgelegd wordt kan naar je specifieke project aangepast moeten worden. We raden aan om zelf te experimenteren en je kennis uit te breiden met officiële CSS-documentatie van W3C en andere betrouwbare bronnen. Webstandaarden en browserondersteuning kunnen veranderen — zorg dat je altijd op de hoogte bent van de huidige stand van zaken.