`@media`

Сайт может подстраиваться под обстоятельства благодаря этой директиве.

Время чтения: 8 мин

Кратко

Скопировано

Директива, которая позволяет задавать разные стили для разных параметров экрана — ширины, высоты, ориентации и даже типа устройства.

Пример

Скопировано

Сделаем элемент с классом block флекс-контейнером, когда ширина экрана 900 пикселей или больше:

        
          
          @media (min-width: 900px) {  .block {    display: flex;  }}
          @media (min-width: 900px) {
  .block {
    display: flex;
  }
}

Как понять

Скопировано

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

Как пишется

Скопировано

В общем виде синтаксис выглядит так:

        
          
          @media [тип устройства] [характеристика устройства] {  /* CSS-правила */}
          @media [тип устройства] [характеристика устройства] {
  /* CSS-правила */
}

Например:

        
          
          @media print and (orientation: landscape) {  .block {    font-size: 25pt;  }}
          @media print and (orientation: landscape) {
  .block {
    font-size: 25pt;
  }
}

Здесь тип устройства — print (принтер), а характеристика устройства — orientation: landscape (альбомная ориентация). То есть при печати на листе в альбомной ориентации размер шрифта у блока будет 25 пунктов.

Есть четыре типа устройств, которые мы можем указать:

all — медиавыражение применится ко всем устройствам. Если не задать никакой тип, по умолчанию применится этот.
print — стили внутри такого медиавыражения применятся при печати на принтерах или экспорте в PDF, в том числе в режиме предпросмотра документа.
screen — для устройств с экранами.
speech — для синтезаторов речи (пока не поддерживается ни одним браузером).

В большинстве случаев, когда вы пишете стили только для экрана, указывать типы screen или all не нужно. Реальное практическое использование есть только у типа print.

Возможные характеристики устройства можно разделить на несколько категорий:

Характеристики страницы и окна браузера

width — ширина окна браузера;
min-width — минимальная ширина окна браузера;
max-width — максимальная ширина окна браузера;
height — высота окна браузера;
min-height — минимальная высота окна браузера;
max-height — максимальная высота окна браузера;
aspect-ratio — соотношение между шириной и высотой окна;
min-aspect-ratio — минимальное соотношение между шириной и высотой окна;
max-aspect-ratio — максимальное соотношение между шириной и высотой окна;
orientation — ориентация устройства: landscape (альбомная, горизонтальная) или portrait (портретная, вертикальная);
overflow-block — проверка, как устройство вывода обрабатывает содержимое, которое выходит за пределы области просмотра по оси блока;
overflow-inline — проверка, можно ли прокручивать содержимое, выходящее за пределы области просмотра по встроенной оси.

Качество отображения

environment-blending — метод для определения внешнего окружения устройства, такого как тусклое или слишком яркое освещение;
display-mode — проверка режима браузера, используется в PWA: fullscreen (полноэкранный режим без интерфейса браузера), standalone (как нативное приложение), minimal-ui (минимальный интерфейс браузера) и browser (обычное окно браузера);
grid — проверка, является ли экран растровым (все современные экраны) или сеточным (как старые телефоны или текстовые терминалы);
resolution — разрешение устройства в dpi или dpcm;
min-resolution — минимальное разрешение устройства в dpi или dpcm;
max-resolution — максимальное разрешение устройства в dpi или dpcm;
scan — процесс сканирования устройства вывода;
update — скорость обновления экрана: none (не обновляется), slow (медленно), fast (быстро).

Цвет

color — количество бит на цвет на устройстве вывода;
min-color — минимальное количество бит на цвет на устройстве вывода;
max-color — максимальное количество бит на цвет на устройстве вывода;
color-index — количество цветов, которое может отображаться устройством;
min-color-index — минимальное количество цветов, которое может отображаться устройством;
max-color-index — максимальное количество цветов, которое может отображаться устройством;
monochrome — количество бит на цвет на монохромном устройстве вывода;
min-monochrome — минимальное количество бит на цвет на монохромном устройстве вывода;
max-monochrome — максимальное количество бит на цвет на монохромном устройстве вывода;
color-gamut — примерный диапазон цветов, поддерживаемый браузером и устройством вывода;
dynamic-range — комбинация уровня яркости, глубины цвета и контрастного соотношения для видео в браузере или устройстве вывода;
inverted-colors — проверка, инвертируются ли цвета браузером или ОС.

Взаимодействие

hover — проверка, позволяет ли основное устройство наводить указатель на элементы;
any-hover — проверка, позволяет ли любое из устройств ввода наводить указатель на элементы;
pointer — проверка, является ли основное устройство ввода указателем, и насколько оно точное;
any-pointer — проверка, является ли любое из устройств ввода указателем, и насколько оно точное.

Характеристики с префиксом video-

video-width — ширина видео на выбранном дисплее (ведётся обсуждение);
video-height — высота видео на выбранном дисплее (ведётся обсуждение);
video-color-gamut — примерный диапазон цветов, поддерживаемый для видео в браузере и устройстве вывода;
video-dynamic-range — комбинация уровня яркости, глубины цвета и контрастного соотношения для видео в браузере или устройстве вывода;
video-resolution — разрешение видео на выбранном дисплее (ведётся обсуждение).

Скрипты

scripting — проверка, включены ли скрипты;

Пользовательские настройки

forced-colors — проверка, запрещает ли браузер цвета, доступные для использования;
prefers-color-scheme — определяет, какую тему предпочитает пользователь — светлую или тёмную;
prefers-contrast — определяет, установлены ли настройки для увеличения или уменьшения контраста между цветами;
prefers-reduced-data — определяет, предпочитает ли пользователь загружать меньше данных на странице;
prefers-reduced-motion — определяет, отключены ли анимации в системных настройках пользователя;
prefers-reduced-transparency — определяет, отключена ли прозрачность в системных настройках пользователя.

Устаревшие

device-aspect-ratio — соотношение между шириной и высотой устройства вывода;
device-height — высота дисплея устройства;
device-width — ширина дисплея устройства.

В медиавыражении может быть перечислено несколько условий через запятую. В таком случае стили применятся для любого из указанных условий. Например:

        
          
          @media (orientation: landscape), (max-width: 960px) {  .text {    color: tomato;  }}
          @media (orientation: landscape), (max-width: 960px) {
  .text {
    color: tomato;
  }
}

Такой код применится на всех устройствах с альбомной ориентацией экрана или на всех устройствах с шириной экрана менее 960 пикселей.

Часто в медиавыражениях может использоваться ключевое слово and, реже встречаются ключевые слова not и only.

Если мы пишем и тип устройства, и указываем характеристики, то после типа обязательно пишется and.

        
          
          @media print and (min-width: 320px) {  .link {    text-decoration: underline;  }}
          @media print and (min-width: 320px) {
  .link {
    text-decoration: underline;
  }
}

Также and пишется между характеристиками.

        
          
          @media (min-width: 320px) and (max-width: 640px) {  .link {    text-decoration: underline;  }}
          @media (min-width: 320px) and (max-width: 640px) {
  .link {
    text-decoration: underline;
  }
}

Ключевое слово not используется для отрицания выражения. Оно имеет низкий приоритет и применяется в последнюю очередь. Например:

        
          
          @media not screen and (min-width: 380px) {  .block {    display: flex;  }}
          @media not screen and (min-width: 380px) {
  .block {
    display: flex;
  }
}

Здесь сначала вычислится выражение «для всех экранов с минимальной шириной 380 пикселей», а потом оно инвертируется — «для всех устройств, кроме устройств с экранами с минимальной шириной 380 пикселей». То есть будет читаться браузером как:

        
          
          @media not (screen and (min-width: 380px)) {  .block {    display: flex;  }}
          @media not (screen and (min-width: 380px)) {
  .block {
    display: flex;
  }
}

При использовании not в медиавыражениях с запятой инвертируется только та часть выражения, где указан not. Например:

        
          
          @media not screen and (height: 500px), print and (height: 700px) {  .text {    color: tomato;  }}
          @media not screen and (height: 500px), print and (height: 700px) {
  .text {
    color: tomato;
  }
}

Чтобы лучше понять, как выполнится этот пример, можно добавить дополнительные группирующие скобки:

        
          
          @media (not (screen and (height: 500px))), print and (height: 700px) {  .text {    color: tomato;  }}
          @media (not (screen and (height: 500px))), print and (height: 700px) {
  .text {
    color: tomato;
  }
}

Поскольку запятая в медиавыражении означает лишь перечисление, то not в первой части выражения не будет распространяться на вторую, и инвертируется только часть «для всех экранов с высотой окна браузера 500 пикселей».

Ключевое слово only иногда встречается перед указанием типа устройства — оно используется для того, чтобы старые браузеры, которые не поддерживают медиавыражения, не применяли указанные стили. Современные браузеры никак не реагируют на only.

        
          
          @media only screen and (max-width: 600px) {  body {    background-color: cornflowerblue;  }}
          @media only screen and (max-width: 600px) {
  body {
    background-color: cornflowerblue;
  }
}

Подсказки

Скопировано

💡 Для вёрстки от мобильных (mobile first) лучше использовать медиавыражения с min-width и располагать их в порядке увеличения ширины экрана; для вёрстки от десктопа (desktop first) — max-width, и располагать выражения в обратном порядке.

На практике

Скопировано

Лена Райан советует

Скопировано

🛠 медиавыражения можно вкладывать в медиавыражения и другие директивы:

        
          
          @media (min-width: 520px) {  @media (max-width: 1080px) {    .cell {      background: peachpuff;    }  }}
          @media (min-width: 520px) {
  @media (max-width: 1080px) {
    .cell {
      background: peachpuff;
    }
  }
}

        
          
          @supports (position: sticky) {  @media (min-width: 1080px) {    .block {      position: sticky;    }  }}
          @supports (position: sticky) {
  @media (min-width: 1080px) {
    .block {
      position: sticky;
    }
  }
}