Медиа-запросы (media queries) имеют весьма разнообразные области применения:

1. для проверки ширины и высоты области видимости,
2. для проверки ширины и высоты устройства,
3. для определения ориентации устройства (книжная или альбомная)

Вообще, медиа-запросы - это очень удобный, популярный и, практически, незаменимый инструмент создания адаптивной верстки, позволяющий использовать различные стили для различных устройств: настольных компьютеров, ноутбуков, планшетов, смартфонов.

Обычно, медиа-запросы ассоциируются с CSS, но они могут так же успешно применяться для HTML и JavaScript.

HTML

Мы можем использовать медиа-запросы, чтобы установить условие: какой использовать в HTML-файла, как показано ниже:

Еще мы можем использовать media queries для элемента

Так же, медиа-запросы можно применять для изображений . Каким образом? С помощью вложенных элементов :

CSS

Это самый распространенный способ применения медиа-запросов.

Правило @mediaиспользуется в медиа-запросов для определения различных стилей для различных устройств или устройств, соответствующих определенным параметрам:

@media only screen and (min-device-width: 500px) and (max-device-width: 8000px) {
  .container {
    display: none;
  }
}

JS

Медиа-запросы можно применять и в JavaScript с помощью метода window.matchMedia().

Например, если мы хотим изменить фоновый цвет элемента на красный, в случаях когда ширина экрана превышает 600px, мы можем сделать это, создав константу с помощью метода window.matchMedia():

// создаем условие медиа-запроса для минимальной ширины экрана 600px
const mediaQueryCondition = window.matchMedia( '( min-width: 600px )' )

применяем условие медиа-запроса:

if ( mediaQueryCondition.matches ) {
    document.body.style.cssText = `
        background-color: red;
    `
}

Спасибо за внимание.