Media queries

Wat ga je leren?

Een media query laat je CSS reageren op de schermbreedte, zodat dezelfde pagina er op een telefoon net zo goed uitziet als op een laptop.

Theorie

Een media query is een CSS-blok dat alleen wordt toegepast onder bepaalde voorwaarden — meestal: als het scherm smaller of breder is dan een bepaalde breedte.

.kaart {
  width: 600px;
}

@media (max-width: 700px) {
  .kaart {
    width: 100%;
  }
}

Lees dit als: "als de schermbreedte 700px of minder is, gebruik dan deze regels". Op een laptop is de kaart 600px breed; op een telefoon vult hij de hele breedte.

De twee meest-gebruikte voorwaarden

Voorwaarde	Wanneer geldig
(max-width: 700px)	Schermen smaller dan 700px (mobiel)
(min-width: 800px)	Schermen breder dan 800px (desktop)

Je kunt ze ook combineren: @media (min-width: 600px) and (max-width: 900px) → alleen tablets.

Aanpak: "mobile-first"

Veel ontwikkelaars schrijven hun CSS eerst voor kleine schermen (geen media query nodig) en voegen daarna regels toe voor grotere schermen via min-width. Je opent dan voor de smalle weergave geen apart blok — die is de basis.

/* Basis: mobiel */
.menu { flex-direction: column; }

/* Aanvulling: desktop */
@media (min-width: 700px) {
  .menu { flex-direction: row; }
}

Predict

Wat denk je dat er gebeurt met dit blok als je het voorbeeld op een breedte onder 600px bekijkt?

.titel { font-size: 3rem; }
@media (max-width: 600px) {
  .titel { font-size: 1.5rem; }
}

Klik hier voor het antwoord

Op brede schermen is .titel 3rem groot (zo'n 48px). Zodra de breedte onder 600px komt, schakelt de browser over naar de media-query-regel en wordt .titel 1,5rem (24px) — half zo groot. Kies je weer een bredere stand, dan keert het terug.

Probeer en onderzoek

Probeer eerst zelf, klap dan het antwoord uit.

1. Verander max-width: 500px in max-width: 800px en klik op Tablet (768px). Schakelt die nu ook om?
   Antwoord

   Ja: op Tablet wordt de kaart nu ook lichtrood, met kleinere kop en minder padding, want 768 is kleiner dan 800. Alleen Breed (1100px) houdt de lichtblauwe kaart.
2. Zet onderaan de CSS een tweede media query voor max-width: 300px die .kaart de background-color: lightgreen geeft. Waarom wordt de kaart niet groen als je op Telefoon klikt, terwijl dat de smalste knop is?
   Antwoord

   Telefoon is 320 pixels breed, en dat is meer dan 300, dus de regel geldt niet. In de stand Vol kan het voorbeeld wel smaller zijn: op een laptopscherm is het vaak maar zo'n 280 pixels, en dan zie je wel groen.
3. Verander max-width: 500px in min-width: 800px. Bij welke knop wordt de kaart nu lichtrood?
   Antwoord

   Alleen bij Breed (1100px). min-width: 800px geldt vanaf 800 pixels en breder, dus nu krijgt juist het brede scherm de kleine stijl, en zijn Telefoon en Tablet lichtblauw.

Editor laden...

Test je media query

Boven het voorbeeld staan de knoppen Telefoon (320px), Tablet (768px) en Breed (1100px). Het voorbeeld wordt dan echt zo breed gerekend, ook al is het paneel smaller; de melding eronder zegt op welke breedte je kijkt. Zo zie je de breekpunten omschakelen zonder je browservenster aan te raken.

Modify

Opdracht: Voeg een tweede breekpunt toe op max-width: 320px (heel smal mobiel) waarbij de tekst over één regel verdeeld wordt en de padding nóg kleiner is.

Editor laden...

Tip

Stapel meerdere @media-regels onder elkaar. Ze kunnen elkaar overschrijven — de browser past ze toe in volgorde.

Antwoord

@media (max-width: 320px) {
  .kaart {
    padding: 4px;
  }
  .kaart h2 {
    font-size: 1rem;
  }
}

Make

Opdracht: Bouw een navigatie van drie links. Op brede schermen staan ze naast elkaar (Flexbox row). Op smalle schermen (< 600px) staan ze onder elkaar (column).

Editor laden...

Tip

Begin met de mobiele versie als basis (flex-direction: column). Voeg een @media (min-width: 600px)-regel toe die flex-direction: row toepast.

Antwoord

<div class="menu">
  <a href="#">Home</a>
  <a href="#">Over</a>
  <a href="#">Contact</a>
</div>

.menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: #eef;
  padding: 16px;
}

.menu a {
  text-decoration: none;
  color: #333;
}

@media (min-width: 600px) {
  .menu {
    flex-direction: row;
    justify-content: space-around;
  }
}

Er gaat iets mis

De viewport-meta-tag vergeten

<!-- Deze regel ontbreekt in de <head> -->
<meta name="viewport" content="width=device-width, initial-scale=1">

Zonder die regel doet een telefoon alsof zijn scherm 980px breed is en krimpt hij de hele pagina. Je max-width: 600px-regel wordt dan nooit gebruikt, hoe smal het toestel ook is. Op je laptop zie je daar niets van: daar klopt de breedte wel. Zet hem altijd in de <head>.

Een breekpunt kiezen dat je nooit haalt

/* Deze regel gaat nooit aan op een telefoon */
@media (min-width: 1200px) {
  .kaart { background-color: lightgreen; }
}

Een min-width die hoger ligt dan het scherm waarop je test, doet niets — en dat lijkt op een fout in je CSS. Controleer met de knoppen boven het voorbeeld op welke breedte je kijkt voordat je je regel gaat aanpassen.