Een CSS media query is het meest fundamentele responsive hulpmiddel dat er is: het laat je ontwerp andere stijlen toepassen op basis van schermgrootte, oriëntatie of gebruikersvoorkeuren. Een tabel die op een telefoon buiten beeld loopt, een knop die op desktop reusachtig oogt, een sectie die een horizontale schuifbalk veroorzaakt — bijna al deze problemen komen door ontbrekende of slecht doordachte breakpoints. In deze gids loop ik door het opbouwen van een mobile-first breakpointstrategie vanaf nul, de meest gemaakte fouten en de moderne alternatieven, met praktische voorbeelden.
Hoe werkt een media query?
Een media query combineert een mediatype (meestal screen) met een of meer voorwaarden. Is de voorwaarde waar, dan worden de regels erin toegepast; zo niet, dan worden ze overgeslagen. De meest gebruikte voorwaarden zijn min-width en max-width.
/* Geldt op schermen van 600px en breder */
@media (min-width: 600px) {
.kaart {
display: grid;
grid-template-columns: 1fr 1fr;
}
}Het cruciale detail: min-width: 600px betekent "als de breedte 600px of meer is." max-width: 600px betekent "als de breedte 600px of minder is." Deze twee verwarren is oorzaak nummer één van responsive bugs.
Waarom mobile-first wint
Er zijn twee strategieën: regels toevoegen van klein naar groot scherm (mobile-first, met min-width) of regels overschrijven van groot naar klein (desktop-first, met max-width). Er zijn concrete redenen om voor mobile-first te kiezen:
- De standaardstijl is het eenvoudigst: je schrijft de basisstijlen als één kolom en voegt pas complexiteit toe naarmate het scherm groeit.
- Minder overrides: begin je met
max-width, dan moet je voortdurend desktopstijlen ongedaan maken, wat je CSS broos maakt. - Prestaties: een mobiel apparaat hoeft geen desktopregels te evalueren die het niet aangaan.
In de praktijk: schrijf je basisstijl zonder enige media query en voeg daarna min-width-blokken toe voor grotere schermen:
/* Mobiel: standaard, één kolom */
.raster { display: grid; gap: 16px; }
/* Tablet en groter */
@media (min-width: 768px) {
.raster { grid-template-columns: repeat(2, 1fr); }
}
/* Desktop */
@media (min-width: 1024px) {
.raster { grid-template-columns: repeat(3, 1fr); }
}Waar moeten breakpoints komen?
Een veelvoorkomende misvatting is om breakpoints te bepalen op basis van de pixelbreedte van populaire apparaten (iPhone, iPad, enzovoort). Apparaatmodellen blijven veranderen; de "standaard" van vandaag is morgen verouderd. De juiste aanpak is een breakpoint plaatsen waar de inhoud breekt. Verbreed je ontwerp langzaam; worden regels te lang om comfortabel te lezen of wordt een kaart lelijk samengeperst, zet daar dan een breakpoint.
Een startpunt helpt toch. In de meeste projecten volstaan deze drie of vier bereiken:
- ~480–600px: overgang grote telefoon / kleine tablet
- ~768px: tablet, van een gestapelde indeling naar meerdere kolommen
- ~1024px: kleine desktop / tablet in liggende stand
- ~1280px+: brede desktop, de inhoudsbreedte begrenzen
Beschouw deze waarden niet als heilig; verschuif ze naar de echte inhoud van je project.
px, em, rem: de juiste eenheid kiezen
em gebruiken in plaats van px in media-queryvoorwaarden heeft één voordeel: als een gebruiker de lettergrootte van de browser vergroot, schalen de breakpoints mee, wat de toegankelijkheid verbetert. Een em binnen een media query wordt berekend ten opzichte van de root-lettergrootte (meestal 16px), dus 37.5em ≈ 600px.
@media (min-width: 48em) { /* ~768px */
.zijbalk { position: sticky; top: 0; }
}De algemene regel: em is een consistente keuze voor layout-breakpoints, maar px is ook volledig geldig. Kies één standaard in je team en houd je daaraan.
Media queries voorbij breedte
Media queries gaan niet alleen over breedte. Een paar krachtige toepassingen:
- Oriëntatie:
@media (orientation: landscape)voor een indeling specifiek voor de liggende stand. - Donkere modus:
@media (prefers-color-scheme: dark)om aan te sluiten op het systeemthema. - Beperkte beweging:
@media (prefers-reduced-motion: reduce)om animaties uit te zetten; dit is een toegankelijkheidsvereiste. - Aanwijzertype:
@media (hover: hover)om hover-effecten alleen op apparaten met een muis te geven.
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; transition: none !important; }
}Het moderne alternatief: container queries
Media queries kijken altijd naar de viewport. Maar vaak wil je dat een component zich aanpast aan de breedte van zijn eigen container. Daar komen @container-queries in beeld, en ze worden nu in alle actuele browsers ondersteund.
.lijst { container-type: inline-size; }
@container (min-width: 400px) {
.kaart { display: flex; gap: 12px; }
}Zo kan hetzelfde kaartcomponent verticaal stapelen in een smalle zijbalk en naast elkaar staan in een breed hoofdgebied — zonder enige globale breakpoint aan te raken. Container queries vervangen media queries niet, ze vullen ze aan: media queries voor de paginalay-out, container queries voor herbruikbare componenten is een goede taakverdeling.
Onmisbaar: de viewport-metatag
Opdat al je media queries correct werken op mobiel, moet de pagina deze regel in zijn <head> hebben. Zonder deze regel rendert een telefoon de pagina op desktopbreedte en verkleint die, waardoor je breakpoints niet afgaan:
<meta name="viewport" content="width=device-width, initial-scale=1">Veelgestelde vragen
Moet ik min-width of max-width gebruiken?
Werk je mobile-first, leun dan op min-width: de basisstijl is mobiel en je bouwt uit naarmate het scherm groeit. Houd je aan één strategie; beide lukraak mengen leidt tot tegenstrijdige regels en CSS die lastig te debuggen is.
Hoeveel breakpoints moet ik gebruiken?
Er is geen vast aantal. De meeste sites werken prima met drie of vier. Plaats ze waar de inhoud breekt, niet per apparaatmodel. Een onnodig breakpoint maakt het onderhoud alleen maar moeilijker.
Gaan container queries media queries vervangen?
Nee, beide worden samen gebruikt. Media queries zijn zinvol voor de algemene paginalay-out en globale drempels, terwijl container queries passen bij componenten die zich aan hun context aanpassen.
Een responsive interface nodig? Ik bouw sites die er op elk scherm onberispelijk uitzien met een mobile-first, schone en onderhoudbare CSS-architectuur. Om over je project te praten, neem contact met me op.