Kunt u het principe van media query in webontwikkeling uitleggen?

Media query — is een CSS-mechanisme waarmee verschillende stijlen kunnen worden toegepast afhankelijk van de kenmerken van het apparaat of het browservenster, bijvoorbeeld schermbreedte, oriëntatie, resolutie en andere parameters.

In webontwikkeling wordt media query gebruikt om een responsief ontwerp te maken, zodat de site correct wordt weergegeven op verschillende apparaten — van mobiele telefoons tot grote monitoren.

Voorbeeld van een media query die de achtergrondkleur wijzigt wanneer de schermbreedte minder dan 600px is:

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

In Flutter, hoewel media query een webterm is, bestaat er een vergelijkbare klasse MediaQuery die informatie over de schermgrootte en andere apparaatparameters kan verkrijgen voor een responsieve interface.