Puoi spiegare il principio di funzionamento delle media query nello sviluppo web?

Media query — è un meccanismo CSS che consente di applicare stili diversi in base alle caratteristiche del dispositivo o della finestra del browser, ad esempio larghezza dello schermo, orientamento, risoluzione e altri parametri.

Nello sviluppo web, la media query viene utilizzata per creare un design reattivo, in modo che il sito venga visualizzato correttamente su diversi dispositivi — dai telefoni cellulari ai grandi monitor.

Esempio di media query che cambia il colore di sfondo quando la larghezza dello schermo è inferiore a 600px:

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

In Flutter, anche se media query è un termine del web, esiste una classe simile MediaQuery che permette di ottenere informazioni sulla dimensione dello schermo e altri parametri del dispositivo per un'interfaccia adattiva.