Media element in html

@media

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

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Пример

Скопировать ссылку «Пример» Скопировано

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

• 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; > > >    Скопировать Скопировано Не удалось скопировать   

Источник