Can you explain the principle of media query in web development?

Media query — is a CSS mechanism that allows applying different styles depending on device characteristics or browser window, such as screen width, orientation, resolution, and other parameters.

In web development, media query is used to create a responsive design so that the site displays correctly on various devices — from mobile phones to large monitors.

Example of a media query that changes the background color when the screen width is less than 600px:

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

In Flutter, although media query is a web term, there is a similar class MediaQuery that allows obtaining information about the screen size and other device parameters for adaptive interfaces.