Pode explicar o princípio de funcionamento da media query no desenvolvimento web?

Media query — é um mecanismo CSS que permite aplicar estilos diferentes dependendo das características do dispositivo ou da janela do navegador, por exemplo, largura de ecrã, orientação, resolução e outros parâmetros.

No desenvolvimento web, a media query é usada para criar um design responsivo, de modo que o site seja exibido corretamente em diferentes dispositivos — desde telemóveis até monitores grandes.

Exemplo de media query que altera a cor de fundo quando a largura do ecrã é inferior a 600px:

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

No Flutter, embora a media query seja um termo da web, existe uma classe semelhante MediaQuery que permite obter informações sobre o tamanho do ecrã e outros parâmetros do dispositivo para uma interface adaptativa.