Медиа экраны как пишется

Как правильно писать media-запросы?

Сделал media-запросы для экранов до 900px и 768px. Думал что это для смартфонов, но не тут то было. Даже на моём стареньком Xiaomi ширина экрана 1080px, что не намного меньше чем ширина экрана моего ноутбука. В итоге никакой адаптивности на телефоне я не получаю. Может это как-то по-другому делается?

@media screen and (max-width: 900px)

Вопрос задан более трёх лет назад
133 просмотра

1 комментарий

Простой 1 комментарий

Ankhena

Ankhena @Ankhena Куратор тега CSS

Откройте вот эту ссылочку на смартфоне и она покажет, что его вьюпорт вовсе не 1080px. Поэтому, все media будут нормально работать, если укажете правильный meta viewport.

Медиаграмотность: как писать слова, начинающиеся с медиа

Примеры таких слов:
медиаиндустрия, медиабизнес, медиакомпания, медиакампания, медиарынок, медиареклама, медиаплан, медиаканал, медиахолдинг, медиасеть, медиаконтент, медиавозможности, медиаанализ, медиаэксперт, медиапродукт, медиакит, медиатека, медиапроизводство, медиастудия, медиасистема, медиакоммуникации, медиаспецкурс, медиапоказатели, медиаотдел, медиабюро, медиакризис, медиаинвестиции, медиашкола.

Используйте подобные слова, только если без них не обойтись, потому что они понятны не каждому.

@media

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

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

Открыть/закрыть навигацию по статье

Обновлено 17 мая 2022

Кратко

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

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

Пример

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

Сделаем элемент с классом 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; > > >