Moderne webontwikkeling is ondenkbaar zonder adaptieve/responsieve ontwerpen. Dit stelt gebruikers in staat om webbronnen op elk apparaat gelijkwaardig te gebruiken: een smartphone, een tablet, een desktop of een tv.

Hoe werkt het?

1. Het ontwikkelingsteam bepaalt hoe elk element eruitziet afhankelijk van de schermgrootte;
2. De benodigde instructies worden aan de code toegevoegd;
3. De browser volgt de wijzigingen van het viewport;
4. De browser past de regels toe die het ontwikkelingsteam in de code heeft vastgelegd.

Media-queries

Media-query maakt adaptieve/responsieve ontwerpen mogelijk. Met behulp van deze queries kunnen ontwikkelaars de stijlen van elk element instellen afhankelijk van de schermgrootte.

Opmerking

Een media-query kan worden gezien als instructies: "Als het scherm van de gebruiker een desktop is, pas dan deze stijlen toe op het element. Als het scherm van de gebruiker een smartphone is, pas dan andere stijlen toe op het element. Enzovoort.".

De basis-syntaxis van de media-query is als volgt:

@media <media_type> <operator> (<media_feature>) {
 /* CSS rules */
}

1. <media_type> - geeft het type apparaat aan. Mogelijke waarden:
   • all - standaardwaarde. Als er niets is opgegeven, geldt de media-regel voor alle apparaten;
   • print - de media-regel geldt voor apparaten die afdrukbare documenten produceren, zoals printers;
   • screen - de media-regel geldt voor alle apparaten met een fysiek scherm.
2. <media_feature> - geeft apparaatkenmerken aan. Meest gebruikelijke toepassingen:
   • min-width: - de minimale breedte van het viewport;
   • max-width: - de maximale breedte van het viewport.
3. <operator> - media-type en media-feature worden gescheiden door de optionele logische operator. De waarden kunnen zijn: and of ,.

Opmerking

In de volgende hoofdstukken behandelen we het gebruik van media-queries in de praktijk.