Можете ли да обясните принципа на работа на media query в уеб разработката?

Media query — това е CSS механизъм, който позволява прилагането на различни стилове в зависимост от характеристиките на устройството или прозореца на браузъра, например ширината на екрана, ориентацията, резолюцията и други параметри.

В уеб разработката media query се използва за създаване на адаптивен дизайн, така че сайтът да се показва правилно на различни устройства — от мобилни телефони до големи монитори.

Пример за media query, който променя цвета на фона при ширина на екрана по-малка от 600px:

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

В Flutter, въпреки че media query е термин от уеб, съществува подобен клас MediaQuery, който позволява да се получи информация за размера на екрана и други параметри на устройството за адаптивен интерфейс.