nl nl nl en en en en en en en en en en en en de en en nl nl nl nl nl en nl nl nl nl nl en nl en en nl en nl en nl en nl en en nl en nl en sv nl nl nl nl nl nl nl nl en en en nl nl en en nl fr en en nl en nl nl en nl de nl nl nl nl nl nl nl en nl nl en nl nl nl nl nl nl nl nl
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.
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:
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:
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.
Zoek je nog iets meer verdieping? Hier zijn een aantal nuttige links:
Media Queries op W3schools
Render Blocking CSS (Google Developers)
Geen reacties Schrijf een reactie
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.
CSS voor beginners - eerste stappen
CSS voor beginners – een stylesheet maken
Opsommingstekens stylen met CSS
Het belang van mobiele optimalisatie van je website
Hosting, cloud storage, webshop & server
STRATO helpt op Facebook
STRATO helpt op Twitter
Copyright © 2022 STRATO AG
Deze website maakt gebruik van cookies voor onder andere Google Analytics. Deze melding verdwijnt zodra je de cookies hebt geaccepteerd. Meer informatie
We verzamelen informatie van bezoekers om onze website te optimaliseren en om individuele aanbiedingen te doen. Hiervoor gebruiken we cookies (ook van derden), waarvoor we je toestemming nodig hebben. Technisch noodzakelijke cookies worden ook geplaatst als je afwijzen kiest. Je kunt je instellingen later onder aan de pagina wijzigen via instellingen. Kies je toestaan en sluiten? Dan ga je akkoord met alle cookies en met de overdracht ervan naar derde landen  .
Instellingen toestaan en sluiten
Cookie-instellingen selecteren om video af te spelen
Technisch noodzakelijke cookies zijn essentieel voor de navigatie op onze website. Zonder deze cookies zijn veel basisfuncties niet mogelijk, waaronder de weergave en selectie van producten, het vullen van de winkelwagen of het inloggen.
Meer informatie Minder informatie
Wij gebruiken cookies om het gebruikersgedrag beter te begrijpen en om je te helpen bij de navigatie op onze website. We gebruiken deze gegevens ook om de website nog beter aan te passen aan je behoeften.
Meer informatie Minder informatie
Wij slaan informatie op over hoe je onze website gebruikt. Zo kunnen we je aanbiedingen op maat doen, bijvoorbeeld in het kader van campagnes en direct-marketingactiviteiten. Wij zijn verantwoordelijk voor, en controleren, de verwerking van deze data.
Meer informatie Minder informatie
Deze cookies worden gebruikt om je individuele product- en serviceaanbiedingen buiten onze website te laten zien. Hierbij wordt informatie over je gebruikersgedrag doorgegeven aan partnerbedrijven. Zo kan gepersonaliseerde inhoud van ons of van deze partners worden weergeven, passend bij je interesses.
Deze campagnes kunnen door ons of onze partners worden geëvalueerd, gevolgd en gefactureerd. Andere adverterende bedrijven kunnen cookies uit deze categorie ook uitlezen en je gepersonaliseerde content tonen. Voor zover het gebruik van deze data onze eigen gegevensverwerking overstijgt, zijn deze andere bedrijven verantwoordelijk. Dit gebeurt zonder onze medewerking.
Meer informatie Minder informatie
terug Selectie bevestigen Selectie bevestigen Alles selecteren
Bij het afspelen van externe video's worden gegevens aan YouTube verzonden. Hiervoor hebben we je toestemming nodig. Meer informatie vind je in ons