Mediaquery's

Mediaquery's zijn een functie van CSS waarmee de inhoud van een webpagina zich kan aanpassen aan verschillende schermformaten en resoluties. Ze vormen een fundamenteel onderdeel van responsief webdesign en worden gebruikt om de weergave van websites aan te passen voor meerdere apparaten.

Mediaquery's kunnen in de HTML van een webpagina worden opgenomen of in een afzonderlijk .CSS-bestand worden geplaatst waarnaar de webpagina verwijst. Hieronder staat een voorbeeld van een eenvoudige mediaquery:

@media screen and (max-width: 768px)
{
  header { height: 70px; }
  article { font-size: 14px; }
  img { max-width: 480px; }
}

De bovenstaande mediaquery wordt geactiveerd als het venster van de browser van een gebruiker 768 pixels breed of smaller is. Dit kan gebeuren als u het venster op een desktopcomputer kleiner maakt of als u een mobiel apparaat, zoals een tablet, gebruikt om de webpagina te bekijken.

Bij responsief webdesign fungeren mediaquery's als filters voor verschillende schermformaten. Net als bij alle modules in een trapsgewijs stijlblad overschrijven de modules die verderop in de lijst staan de modules erboven. Daarom worden de standaardstijlen doorgaans eerst in een CSS-document gedefinieerd, gevolgd door de mediaquery's voor verschillende schermformaten. Zo kunnen de desktopstijlen eerst worden gedefinieerd, gevolgd door een mediaquery met stijlen voor tabletgebruikers en daarna door een mediaquery die is ontworpen voor gebruikers van een smartphone. Stijlen kunnen ook in de tegenovergestelde volgorde worden gedefinieerd; dit wordt beschouwd als ontwikkeling volgens het principe "mobiel eerst".

Hoewel min-width verreweg de meest gebruikte functie in mediaquery's is, zijn er ook veel andere beschikbaar. Voorbeelden zijn min-device-width, min-device-height, aspect-ratio, max-color-index, max-resolution, orientation en resolution. De waarde resolution kan bijvoorbeeld worden gebruikt om HiDPI-schermen zoals (retinaschermen) te detecteren en afbeeldingen met een hoge resolutie te laden in plaats van standaardafbeeldingen.