Puteți explica principiul de funcționare al media query în dezvoltarea web?

Media query — este un mecanism CSS care permite aplicarea unor stiluri diferite în funcție de caracteristicile dispozitivului sau ale ferestrei browserului, de exemplu, lățimea ecranului, orientarea, rezoluția și alți parametri.

În dezvoltarea web, media query este utilizat pentru crearea unui design adaptabil, astfel încât site-ul să fie afișat corect pe diferite dispozitive — de la telefoane mobile până la monitoare mari.

Exemplu de media query care schimbă culoarea de fundal atunci când lățimea ecranului este mai mică de 600px:

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

În Flutter, deși media query este un termen din web, există o clasă similară MediaQuery care permite obținerea informațiilor despre dimensiunea ecranului și alți parametri ai dispozitivului pentru o interfață adaptabilă.