Hoe werken media-queries in webontwikkeling voor…

Media queries maken het mogelijk om specifieke CSS-stijlen toe te passen op basis van de kenmerken van het apparaat of het weergavegebied. Ze worden gebruikt om een responsief ontwerp te creëren dat correct wordt weergegeven op verschillende schermen, inclusief mobiele apparaten, tablets en desktops.

Hoofdsynthax van een media query:

@media <mediatype> and (<uitdrukking>) {
  /* CSS-regels */
}

<mediatype> bepaalt op welk apparaattype de query van toepassing is (bijvoorbeeld screen, print, all).
<uitdrukking> stelt de voorwaarden vast waaronder de stijlen worden toegepast (bijvoorbeeld breedte, hoogte, schermoriëntatie, resolutie).

Populaire uitdrukkingen voor responsief ontwerp:

min-width: Stijlen worden toegepast als de breedte van het weergavegebied gelijk of groter is dan de opgegeven waarde.
max-width: Stijlen worden toegepast als de breedte van het weergavegebied gelijk of kleiner is dan de opgegeven waarde.
orientation: Stijlen worden toegepast afhankelijk van de schermoriëntatie (portrait of landscape).
resolution: Stijlen worden toegepast afhankelijk van de schermresolutie.

Voorbeeld van gebruik van max-width voor styling op mobiele apparaten:

/* Standaard stijlen */
body {
  font-size: 16px;
}

/* Stijlen voor schermen tot 768px breed (typisch voor mobiel) */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
}

Voorbeeld van gebruik van min-width voor styling op desktops ("mobile first" aanpak):

/* Standaard stijlen voor mobiel */
.column {
  width: 100%;
}

/* Stijlen voor schermen vanaf 992px breed (typisch voor desktops) */
@media screen and (min-width: 992px) {
  .column {
    width: 50%;
    float: left;
  }
}

Combinatie van uitdrukkingen met operators and, or (in media queries wordt or geschreven met een komma) en not:

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Alleen voor tablets */
}

@media screen and (orientation: landscape), print {
  /* Voor landschap oriëntatie en voor print */
}

De meta-tag viewport is belangrijk voor het correct functioneren van media queries op mobiele apparaten:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width stelt de breedte van het weergavegebied gelijk aan de breedte van het apparaat.
initial-scale=1.0 stelt het initiële zoomniveau in.

Zonder deze meta-tag schalen veel mobiele browsers de pagina standaard, waardoor de werkelijke breedte van het apparaat wordt genegeerd, wat de responsiviteit verstoort.

Hoe werken media-queries in webontwikkeling voor responsief ontwerp, inclusief mobiele apparaten?