Ga naar hoofdinhoud

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​

VoorwaardeWanneer 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 het zelf.​

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.

Investigate​

Experimenteer:

  • Verander max-width: 500px naar max-width: 800px — schakelt Tablet (768px) nu ook om?
  • Voeg een tweede media query toe voor max-width: 300px met background-color: lightgreen. Waarom zie je die kleur niet als je op Telefoon klikt, terwijl die knop toch de smalste is?
  • Wat doet min-width: 800px als alternatief?

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.