In de laatste paar jaar is er een enorme groei geweest van verschillende apparaten die toegang hebben op het web. Je webpagina kan worden beken op smart-phones of op tablets, maar natuurlijk ook nog gewoon via de pc op een breedbeeld scherm. Ook is er een opmars van bijvoorbeeld tekst lezers en soortgelijke technologie. Om hier op in te springen is er in CSS een handige feature, genaamd media queries. Hiermee kun je een styleheet voor een speciaal apparaat maken.

Bekijk het artikel “Media queries verder uitgediept” voor een gedetailleerde uitleg van media queries.

3 manieren om een media querie aan je pagina toe te voegen

External stylesheet:

<link rel="stylesheet" type="text/css" href="smallscreen.css" media="only screen and (max-width: 480px)" />

via de @import in een stylesheet

@import "smallscreen.css" only screen and (max-width: 480px)

als een media-regel in een stylesheet

@media only screen and (max-width: 480px)
{
/* de regels die hier komen te staan zijn alleen van toepassing op een  browser window van 480px of kleiner*/
\}

In alle bovenstaande methodes worden alleen schermen van 480px en kleiner benaderd. en de browser moet natuurlijk media queries begrijpen.

Browsers die media queries ondersteunen

CSS media queries support FF IE Chrome Safari Opera iOS Safari Opera Mobile Android browser
3.5+ 9+ All known versions 4+ 9.5+ 3.2+ 10+ 2.1+