CSS media queries zijn een krachtige techniek die wordt gebruikt om de weergave van inhoud zoals bijvoorbeeld een WordPress website dynamisch aan te passen aan verschillende eigenschappen van het apparaat waarop de website wordt bekeken.
CSS media queries
Ze stellen webdesigners in staat om specifieke CSS-regels toe te passen op basis van kenmerken zoals schermbreedte, -hoogte, resolutie, oriƫntatie en meer.
Media queries vormen de basis van responsive webdesign, waardoor een optimale gebruikerservaring op diverse apparaten mogelijk wordt.
/* Basis stijl voor alle apparaten */
body {
background-color: white;
color: black;
}
/* Media query voor apparaten met een schermbreedte van maximaal 600px */
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
Uitleg CSS media query
Wat zie je in de CSS terug? Dat leggen we hierna uit.
- Standaardstijlen: CSS-regels buiten de media query zijn van toepassing op alle schermgroottes en apparaattypen.
- Media query: @media (max-width: 600px) specificeert dat de CSS-regels binnen deze query alleen worden toegepast op apparaten met een schermbreedte van maximaal 600 pixels.
- Binnen de query: De body achtergrondkleur wordt ingesteld op lightblue wanneer de schermbreedte 600px of minder is.
Toepassing media queries
Er zijn verschillende scenario’s waarbij media queries handig zijn. Dit gaat met name om verschillende schermformaten. Maar je kunt bijvoorbeeld ook een speciale styling meegeven aan een recept met WP Recipe Maker of WooCommerce product op je website.
- Responsive design: Door verschillende layouts toe te passen voor mobiele apparaten, tablets en desktops, wordt de weergave geoptimaliseerd voor elk apparaat.
- High resolution displays: Specifieke stijlen kunnen worden toegepast voor retina- of high-DPI-schermen om visuele kwaliteit te verbeteren.
- Print stijlen: Aanpassen van de weergave bij het afdrukken van een webpagina om ervoor te zorgen dat de inhoud goed wordt geformatteerd voor papier.