Media queries zijn een CSS-techniek die wordt gebruikt om verschillende eigenschappen toe te passen op verschillende schermgroottes of apparaten. De syntax ziet er gewoonlijk zo uit:
```
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
```
In dit voorbeeld wordt de achtergrondkleur van de body lightblue wanneer de breedte van het scherm kleiner of gelijk is aan 600px.
Hier is het basisproces om een media query te gebruiken:
1. Bepaal eerst op welk schermtype je stijlen wilt toepassen. Voorbeeld: `@media screen …`.
2. Kies vervolgens de eigenschap die je wilt bevragen. Dit kunnen dingen zijn zoals breedte, hoogte, resolutie, enzovoort. Voorbeeld: `@media screen and (max-width: 600px) …`.
3. Ten slotte definieer je de CSS-stijlen die op dit specifieke schermformaat zullen gelden. Voorbeeld:
```
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
```
Je kunt ook verschillende mediaqueries gebruiken voor verschillende schermafmetingen. Bijvoorbeeld:
```
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
@media screen and (min-width: 601px) and (max-width: 1024px) {
body {
background-color: lightgreen;
}
}
```
In het bovenstaande voorbeeld wordt de achtergrondkleur van de body lightblue wanneer het schermformaat 600px of kleiner is. Maar wanneer de schermbreedte tussen 601px en 1024px is, verandert de achtergrondkleur in lightgreen.
