Czy możesz wyjaśnić zasadę działania media query w tworzeniu stron internetowych?

Media query — to mechanizm CSS, który pozwala na stosowanie różnych stylów w zależności od cech urządzenia lub okna przeglądarki, na przykład szerokości ekranu, orientacji, rozdzielczości i innych parametrów.

W tworzeniu stron internetowych media query służy do tworzenia responsywnego projektu, tak aby strona poprawnie wyświetlała się na różnych urządzeniach — od telefonów komórkowych po duże monitory.

Przykład media query, które zmienia kolor tła, gdy szerokość ekranu jest mniejsza niż 600px:

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

W Flutter, choć media query to termin z weba, istnieje podobna klasa MediaQuery, która pozwala uzyskać informacje o rozmiarze ekranu i innych parametrach urządzenia dla interfejsu adaptacyjnego.