Теория: Медиа-запросы

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

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

@media (условия) {
  /* CSS-код, который будет выполнен для данного условия */
}

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

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

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

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

<style>
  @media (orientation: landscape) {
    /* При горизонтальной ориентации фоновым цветом сайта будет белый */
    body {
      background: #FFF;
    }
  }

  @media (orientation: portrait) {
    /* При вертикальной ориентации фоновым цветом сайта будет чёрный */
    body {
      background: #000;
    }
  }
</style>

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

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

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

<style>
  /* Здесь будут все стили для устройств с viewport больше 1400 пикселей. */

  @media (max-width: 1400px) {
    /*
    Стили для устройств, у которых ширина viewport меньше или равно 1400 пикселей,
    но больше 990 пикселей.
    Эти стили будут использованы для планшетов и ноутбуков с низким разрешением
    */
  }

  @media (max-width: 990px) {
    /*
    Стили для устройств, у которых ширина viewport меньше или равно 990 пикселей,
    но больше 770 пикселей.
    Эти стили подойдут для некоторых мобильных устройств и планшетов
    */
  }

  @media (max-width: 770px) {
    /*
    Стили для устройств, у которых ширина viewport меньше или равно 770 пикселей.
    Это множество мобильных устройств
    */
  }
</style>

Обратите внимание на порядок написания свойств. Помните, что 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 выглядят следующим образом:

<style>
  /* Здесь будут все стили для мобильных устройств с viewport меньше 770 пикселей. */

  @media (min-width: 770px) {
    /*
    Стили для устройств, у которых ширина viewport больше или равно 770 пикселей
    */
  }

  @media (min-width: 990px) {
    /*
    Стили для устройств, у которых ширина viewport
    больше или равно 990 пикселей, но меньше 1400 пикселей.
    */
  }

  @media (min-width: 1400px) {
    /*
    Стили для устройств, у которых ширина viewport
    больше или равно 1400 пикселей
    */
  }
</style>

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

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

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

<style>
  @media (orientation: portrait) and (min-width: 600px) {
    .container {
      /* Для устройств с портретной ориентацией И шириной viewport не менее 600 пикселей сделать элементы с классом container шириной в 100 процентов */
      width: 100%;
    }
  }
</style>

• Логическое «ИЛИ». Свойства применятся в том случае, если хотя бы одно из условий будет выполнено. Условия для этого отделяются запятыми. Возьмём прошлый пример и применим его с использованием «ИЛИ»:

<style>
  @media (orientation: portrait), (min-width: 600px) {
    .container {
      /* Для устройств с портретной ориентацией ИЛИ шириной viewport не менее 600 пикселей сделать элементы с классом container шириной в 100 процентов */
      width: 100%;
    }
  }
</style>

• Логическое «НЕ». Свойства применятся в том случае, если условие не выполняется. Используется ключевое слово not. Реальное использование этого оператора не велико, в виду сложности и не интуитивности происходящего. В связи с этим советую воздержаться в первое время от использования ключевого слова not.

<style>
  @media not all and (orientation: landscape) {
    .container {
      /* Для устройств с портретной ориентацией (условие выглядит как «НЕ горизонтальная») сделать элементы с классом container шириной в 100 процентов */
      width: 100%;
    }
  }
</style>

Использование медиа-запросов при подключении CSS

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Подключение CSS файлов</title>

    <!-- Общие стили для проекта -->
    <link rel="stylesheet" href="style.css">

    <!-- Стили для экранов с viewport не менее 750px -->
    <link rel="stylesheet" media="screen and (min-width: 750px)" href="style750px.css">

</head>
<body>
    <!-- Разметка проекта -->
</body>
</html>