{"id":33722,"date":"2022-09-08T08:52:58","date_gmt":"2022-09-08T06:52:58","guid":{"rendered":"https:\/\/www.strato.nl\/blog\/?p=33722"},"modified":"2023-05-04T10:43:40","modified_gmt":"2023-05-04T08:43:40","slug":"wat-zijn-css-media-querys-en-wat-kan-ik-ermee","status":"publish","type":"post","link":"https:\/\/www.strato.nl\/blog\/wat-zijn-css-media-querys-en-wat-kan-ik-ermee\/","title":{"rendered":"Wat zijn CSS media query’s en wat kan ik ermee?"},"content":{"rendered":"\n

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<\/a> \u2013 om precies te zijn, met media query’s.<\/strong><\/p>\n\n\n\n

Misschien heb je al eens eerder een dergelijk staaltje CSS gezien en je afgevraagd waar het goed voor is:<\/p>\n\n\n\n

@media (max-width: 700px) {{.infobox {padding: 3%;}}<\/pre>\n\n\n\n
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.  <\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Is het venster 701 of meer pixels breed, wordt de regel daarentegen genegeerd.<\/p>\n\n\n\n
Meerdere voorwaarden gecombineerd<\/h2>\n\n\n\n
De media query’s staan \u200b\u200bje meer dan \u00e9\u00e9n 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:<\/p>\n\n\n\n
@media (min-width: 700px) and (max-width: 850px) {{.infobox {padding: 3%;}}<\/pre>\n\n\n\n
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:<\/p>\n\n\n\n
@media print and (min-width: 50rem) {{.infobox {padding: 3%;}}<\/pre>\n\n\n\n
Media query’s in HTML<\/h2>\n\n\n\n
Je kunt ook media query’s met HTML combineren:<\/p>\n\n\n\n
<head>\n    <link rel=\"stylesheet\" href=\"altijd.css\">\n    <link rel=\"stylesheet\" href=\"alle-beeldschermen.css\" media=\"screen\">\n    <link rel=\"stylesheet\" href=\"printer.css\" media=\"print\"><\/pre>\n\n\n\n
Het eerste CSS-stylesheet<\/a> 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:<\/p>\n\n\n\n
<link href=\"mobiel.css\" rel=\"stylesheet\" media=\"screen and (max-width: 700px)\"><\/pre>\n\n\n\n
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. <\/p>\n\n\n\n
Handige links<\/h2>\n\n\n\n
Zoek je nog iets meer verdieping? Hier zijn een aantal nuttige links:<\/p>\n\n\n\n