/ DEV

Медиа-запросы в CSS

Медиа-запросы в CSS полезны, когда вы хотите стилизовать элементы в зависимости от размера экрана или устройства, на котором отображается веб-сайт.

Обычно медиа-запрос состоит из ключевого слова, описывающего тип устройства и выражения, проверяющего характеристики данного устройства. Медиа-запрос является логическим выражением, которое возвращает истину или ложь.

Медиа-запрос пишется в самом файле стилей или в теле документа и начинается с объявления правила @media. Структура медиа запроса довольно проста:

@media условие {
  селектор {
    свойство: значение;
  }
}

Условием может выступать либо устройство - all (все устройства), screen, print и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ - width, height, orientation и т.д., либо их комбинации. Например:

@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

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

Кроме всего прочего, функции могут содержать условия and, not и only (Для старых браузеров, не поддерживающих медиа-запросы). Нет логического оператора or, его роль выполняет запятая. Медиа-функции, заключают в обычные круглые скобки.

Размещение свойств в медиа-запросе не дает никакого приоритета, поэтому логичней размещать медиа-запросы в конце CSS документа для правильного переопределения последних на разных разрешениях или на различных устройствах.

Подробнее о медиа-запросах можете почитать: