Deze 10 jQuery plugins maken je leven een stuk eenvoudiger
10 juli
10 Coole jQuery WordPress Plugins en Tutorials
9 september
Laat alles zien

Wat zijn CSS media queries

Media queries

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+
Vincent Hofman
Vincent Hofman
Sinds 1998 bezig met het maken van webpagina's , muzikant en levensgenieter. Ik vertaal veel Engelse artikelen in het Nederlands en zoek het web af voor interessante sites en weetjes. Heb sinds 2013 mijn eigen bedrijf voor web-consulting en web-developement

1 Comment

  1. […] het artikel “wat zijn media queries” leg ik in het kort uit wat media queries nu eigenlijk zijn. Deze pagina wordt veel bezocht […]

Geef een reactie

%d bloggers liken dit: