¿Puedes explicar el principio de funcionamiento de media query en el desarrollo web?

Media query — es un mecanismo CSS que permite aplicar estilos diferentes según las características del dispositivo o la ventana del navegador, por ejemplo, el ancho de pantalla, orientación, resolución y otros parámetros.

En el desarrollo web, media query se utiliza para crear un diseño adaptable, de modo que el sitio se muestre correctamente en diferentes dispositivos, desde teléfonos móviles hasta monitores grandes.

Ejemplo de media query que cambia el color de fondo cuando el ancho de pantalla es menor a 600px:

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

En Flutter, aunque media query es un término del web, existe una clase similar MediaQuery que permite obtener información sobre el tamaño de la pantalla y otros parámetros del dispositivo para una interfaz adaptable.