Wat zijn CSS media query’s en wat kan ik ermee?

Wat zijn CSS media query’s en wat kan ik ermee?

Op de mobiele versie van je site worden de marges niet correct weergegeven? Overtuigt de positionering van de elementen in de desktopweergave je niet? Dit soort problemen los je op met CSS – om precies te zijn, met media query’s.

Misschien heb je al eens eerder een dergelijk staaltje CSS gezien en je afgevraagd waar het goed voor is:

@media (max-width: 700px) {{.infobox {padding: 3%;}}

In een notendop: media query’s gebruik je om de CSS-informatie in verschillende ‘laden’ te sorteren, die vervolgens open of gesloten blijven, afhankelijk van het scenario. Of nog iets preciezer: afhankelijk van het ‘medium’ of toestel waarop de website of app wordt geopend.

De bovenstaande code is een voorbeeld van een media query. De CSS-regel binnen de accolades wordt alleen onder bepaalde omstandigheden toegepast, namelijk wanneer de breedte van het venster (viewport) maximaal 700 pixels breed is.

Is het venster 701 of meer pixels breed, wordt de regel daarentegen genegeerd.

Meerdere voorwaarden gecombineerd

De media query’s staan ​​je meer dan één voorwaarde toe, daarom kun je ze gemakkelijk met elkaar combineren. Dit is hoe een query die rekening houdt met vensterbreedtes in een bepaald bereik eruit zou kunnen zien. De volgende query heeft bijvoorbeeld alleen betrekking op vensterbreedtes tussen 700 en 850 pixels:

@media (min-width: 700px) and (max-width: 850px) {{.infobox {padding: 3%;}}

De media query’s houden niet alleen rekening met numerieke waarden, je kunt ook met trefwoorden werken. De volgende media query wordt alleen toegepast voor de printversie en alleen als het venster minimaal 50 rem breed is:

@media print and (min-width: 50rem) {{.infobox {padding: 3%;}}

Media query’s in HTML

Je kunt ook media query’s met HTML combineren:

<head>
    <link rel="stylesheet" href="altijd.css">
    <link rel="stylesheet" href="alle-beeldschermen.css" media="screen">
    <link rel="stylesheet" href="printer.css" media="print">

Het eerste CSS-stylesheet hierboven specificeert geen medium en wordt dus altijd toegepast. Het tweede stylesheet wordt alleen gebruikt voor beeldschermen en het derde stylesheet wordt pas toegepast in printmodus. En ook hier kun je cijfers gebruiken:

<link href="mobiel.css" rel="stylesheet" media="screen and (max-width: 700px)">

In dit geval wordt het CSS-bestand alleen geladen voor schermen met een maximale breedte van 700 pixels en anders niet. Deze methode – het integreren van CSS-stylesheets in HTML – heeft het grote voordeel dat het de opbouw van je website niet vertraagt. Zo hoef je namelijk geen overbodige CSS-regels te laden. Dat maakt je website sneller, waarvan je bezoekers uiteraard profiteren.

Handige links

Zoek je nog iets meer verdieping? Hier zijn een aantal nuttige links:

Zoekwoorden: ,

Delen

Je kunt pas een reactie plaatsen nadat je ons privacybeleid en cookies hebt geaccepteerd. Om privacyredenen mogen wij jouw persoonsgegevens anders niet verwerken.

Klik onderaan de pagina op de blauwe button OK. Nadat je de pagina opnieuw hebt geladen, kun je een reactie achterlaten.

 

Deze website maakt gebruik van cookies voor onder andere Google Analytics. Deze melding verdwijnt zodra je de cookies hebt geaccepteerd. Meer informatie