Tudja magyarázni a media query működési elvét a webfejlesztésben?

Media query — ez egy CSS mechanizmus, amely lehetővé teszi különböző stílusok alkalmazását a készülék vagy az ablak jellemzői szerint, például a képernyő szélessége, tájolás, felbontás és más paraméterek.

Webfejlesztésben a media query-t arra használják, hogy reszponzív dizájnt hozzanak létre, így a webhely helyesen jelenik meg különböző eszközökön — a mobiltelefonoktól a nagy monitorokig.

Példa egy media query-re, amely megváltoztatja a háttér színét, ha a képernyő szélessége kevesebb, mint 600px:

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

Flutterben, bár a media query egy webes kifejezés, létezik egy hasonló osztály, a MediaQuery, amely lehetővé teszi a képernyő méretének és más eszközparamétereknek az információinak lekérését az adaptív felülethez.