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:
- Media Queries op W3schools
- Media Queries (MDN)
- Het link-element (MDN)
- Render Blocking CSS (Google Developers)
Vladimir Simović
Vladimir Simović setzt seit 2000 mit HTML & CSS und seit 2004 mit WordPress Website-Projekte um. Seit Januar 2004 hat er als einer der ersten Blogger im deutschsprachigen Raum zu den WordPress Anfängen Tipps und Tricks veröffentlicht. Seit April 2022 ist er als Redakteur für den Blog-Bereich von STRATO verantwortlich und verfasst Informationsartikel insbesondere zu WordPress Themen. Im Laufe der Jahre hat er Fachbücher sowie über 60 Fachartikel publiziert und weit über hundert WordPress Projekte betreut und umgesetzt. Aktuell beschäftigt er sich mit dem Einsatz von KI im Content-Marketing.
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.