Môžete vysvetliť princíp fungovania media query vo webovom vývoji?

Media query — je CSS mechanizmus, ktorý umožňuje aplikovať rôzne štýly v závislosti od vlastností zariadenia alebo okna prehliadača, napríklad šírky obrazovky, orientácie, rozlíšenia a ďalších parametrov.

V webovom vývoji sa media query používa na vytvorenie responzívneho dizajnu, aby sa stránka správne zobrazovala na rôznych zariadeniach — od mobilných telefónov po veľké monitory.

Príklad media query, ktorá mení farbu pozadia pri šírke obrazovky menšej ako 600px:

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

V Flutteri, hoci je media query termín z webu, existuje podobná trieda MediaQuery, ktorá umožňuje získať informácie o veľkosti obrazovky a ďalších parametroch zariadenia pre adaptívne rozhranie.