Media query
Ook wel CSS media query
Wat is een media query?
Een media query is een regel in CSS, de opmaaktaal van je website, die de opmaak aanpast aan het scherm. Zo bepaal je bijvoorbeeld dat je menu op een telefoon anders oogt dan op een laptop.
Veelgestelde vragen over media query
Hoe voeg ik een media query toe in WordPress?
Je voegt een media query toe als extra CSS, zonder de bestanden van je thema aan te passen. Zo blijft je code bewaard bij een thema-update.
- Klassiek thema: ga naar Weergave, dan Customizer en kies Extra CSS.
- Blokthema: ga naar Weergave, dan Editor, open Stijlen, klik op het menu met drie puntjes en kies Extra CSS.
- Liever alle code op één plek: gebruik de plugin WPCode en maak een CSS-snippet.
Een voorbeeld: @media (max-width: 768px) { .menu { font-size: 18px; } } maakt de menutekst groter op schermen tot 768 pixels breed.
Welke breakpoints kies ik voor mobiel, tablet en desktop?
Kies je breakpoints, de schermbreedtes waarop je opmaak verandert, op basis van je eigen website en niet op basis van één toestel. Er komen steeds nieuwe schermformaten bij, dus een lijst met telefoons volgen werkt niet.
- Maak je browservenster langzaam smaller.
- Let op waar tekst, knoppen of afbeeldingen lelijk worden of over elkaar vallen.
- Zet precies daar een breakpoint.
Veel thema's gebruiken waarden rond 768 en 1024 pixels als startpunt. Kijk eerst welke breakpoints jouw thema al gebruikt, zodat je eigen regels daarop aansluiten.
Waarom werkt mijn media query niet op mijn telefoon?
Meestal ligt het aan een van deze oorzaken:
- Een andere CSS-regel overschrijft de jouwe. Zet je media query onderaan of maak de selector specifieker.
- Een typfout, zoals een ontbrekende accolade, waardoor de CSS erna niet meer werkt.
- De viewport-tag ontbreekt in de kop van je pagina. Zonder die tag doet een telefoon alsof hij een breed scherm heeft. Goede thema's hebben hem standaard.
- Je ziet een oude versie door caching. Leeg de cache in WP Rocket of LiteSpeed Cache en in je browser.
Test daarna opnieuw op je telefoon.
Kan ik onderdelen op mobiel niet gewoon verbergen?
Dat kan met display: none in een media query, maar vaak is het geen goede oplossing. Het onderdeel verdwijnt alleen uit beeld. De code staat nog steeds in je pagina en afbeeldingen worden soms toch gedownload, wat je site op mobiel trager maakt.
Daarnaast kijkt Google vooral naar de mobiele versie van je website. Verberg je daar belangrijke tekst, dan zien bezoekers op hun telefoon je aanbod niet volledig. Herschik of verklein liever wat te groot is. Verberg alleen echt overbodige onderdelen, zoals een decoratieve afbeelding.
Hoe test ik of mijn media queries goed werken?
Test je media queries met de ontwikkelaarstools in je browser. In Chrome werkt dat zo:
- Klik met rechts op je pagina en kies Inspecteren.
- Klik op het icoontje van telefoon en tablet om de apparaatweergave aan te zetten.
- Kies een toestel of sleep de schermbreedte groter en kleiner.
- Kijk in het stijlenpaneel welke regels actief zijn en welke doorgestreept staan.
Controleer daarna altijd op een echte telefoon, liefst zowel een iPhone als een Android-toestel. Een simulatie laat niet alles zien, zoals hoe groot knoppen voelen onder je duim.
