CSS: Адаптивность сайта
2026-02-26 22:31 Diff
https://ru.hexlet.io/courses/css-adaptive/lessons/media-queries/theory_unit

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

Медиа-запросы записываются следующим образом:

В качестве условия могут выступать различные значения и константы. Зачастую используются следующие конструкции:

Ориентация экрана

Для определения ориентации экрана используется ключ orientation, значением которого может выступать одно из двух значений:

  1. landscape. Условие выполнится для устройств с горизонтальной ориентацией экрана. Горизонтальная — ориентация, при которой ширина viewport больше его высоты.
  2. portrait. Условие выполнится для устройств с вертикальной ориентацией экрана. Вертикальная — ориентация, при которой высота viewport больше его ширины.

Разрешение экрана

При использовании медиа-запросов мы также можем исходить из ширины или высоты viewport. Для этого используются знакомые нам по обычным CSS-правилам условия width, min-width, max-width для ширины и height, min-height, max-height для высоты.

С помощью таких условий создаются breakpoint — контрольные точки. Это границы значений, по которым видоизменяется наш макет. Такие точки остановки позволяют иметь правила для мониторов, планшетов, телефонов, кофеварок.

Обратите внимание на порядок написания свойств. Помните, что CSS является каскадной таблицей, поэтому порядок стилей необходимо контролировать. В данном случае к элементу вначале будет применён стиль по умолчанию, который не находится в медиа-запросе, затем поочерёдно будут применяться стили в зависимости от значений в условии медиа-запроса.

Например, при ширине viewport 770 пикселей для элемента стили применятся в следующем порядке:

  • Стили по умолчанию.
  • Стили для условия медиа-запроса max-width: 1400px.
  • Стили для условия медиа-запроса max-width: 990px.
  • Стили для условия медиа-запроса max-width: 770px.

Подход, описанный выше называется Desktop First. Мы вначале пишем стили для больших мониторов, а в последствии, используя медиа-запросы, дописываем стили для всё более маленьких значений viewport. Его характерная черта в медиа-запросах — использование конструкции max-width в качестве условия.

В противовес Desktop First существует подход Mobile First. Его особенностью является то, что вначале пишутся стили под мобильные устройства, а затем, используя медиа-запросы, пишутся стили для больших размеров viewport. Если в Desktop First основной конструкцией являлось использование max-width, то в Mobile First используется min-width.

Стили, написанные с использованием подхода Mobile First выглядят следующим образом:

Логические операторы

Условия внутри медиа-запросов можно комбинировать. Для этого существует три логических оператора:

  • Логическое «И». Означает, что несколько условий должны быть выполнены для того, чтобы CSS-стили применились к элементу. Для использования логического «И» используется ключевое слово and. Сделаем условие, которое проверяет, что экран устройства находится в портретной (вертикальной) ориентации и имеет ширину viewport не меньше 600 пикселей:
  • Логическое «ИЛИ». Свойства применятся в том случае, если хотя бы одно из условий будет выполнено. Условия для этого отделяются запятыми. Возьмём прошлый пример и применим его с использованием «ИЛИ»:
  • Логическое «НЕ». Свойства применятся в том случае, если условие не выполняется. Используется ключевое слово not. Реальное использование этого оператора не велико, в виду сложности и не интуитивности происходящего. В связи с этим советую воздержаться в первое время от использования ключевого слова not.

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