Css3 screen media: @media — CSS: Cascading Style Sheets

Обратите внимание, при указании типа и функции медиа между ними нужно использовать логический оператор and.

Вот еще несколько примеров простых медиа-запросов, которые указывают либо тип медиа, либо медиа-функцию, либо и то, и другое:

@media print {
  /* styles for print media only */
}

@media (max-width: 65rem) {
  /* styles for any device that has a display width of 65rem or less */
}

@media screen and (min-width: 800px) {
  /* styles for screen viewports that have a width of 800px or more */
}

Несколько медиа-функций

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

/* Extra-small */
@media screen and (max-width: 360px) {
  /* ... */
}

/* Small */
@media screen and (min-width: 361px) and (max-width: 480px) {
  /* . .. */
}

/* Medium-only */
@media screen and (min-width: 481px) and (max-width: 960px) {
  /* ... */
}

/* ... */

Логический оператор or и запятые

Также можно определить несколько запросов и разделить их запятыми. В этом случае запятые действуют как логические операторы or, и запрос становится по сути списком запросов. Медиа-запрос будет применяться, если какой-либо из перечисленных запросов отвечает шаблону.

В следующем примере медиа-запрос будет истинным, если устройство имеет портретную ориентацию или если окно просмотра устройства имеет минимальную ширину 3rem и максимальное соотношение сторон 2/1:

@media (orientation: portrait), (min-width: 3rem) and (max-aspect-ratio: 2/1) {
  /* ... */
}

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

Вы можете использовать логический оператор not в начале запроса, чтобы изменить истинность всего запроса. Оператор not полезен для применения стилей, когда определенные условия не выполняются браузером или устройством. В следующем примере медиа-запрос будет применяться, когда основное указывающее устройство не может наводить курсор на элементы:

@media not screen and (hover: hover) {
  /* ... */
}

Примечание: Тип медиа нужно указывать обязательно. Кроме того, not меняет не весь список запросов (запросы, разделенные запятыми), а только один запрос.

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

Логический оператор only особенный – он скрывает весь запрос для старых браузеров. Другими словами, старые браузеры не понимают ключевое слово only, поэтому игнорируют весь медиа-запрос. Иначе ключевое слово only не действует.

@media only all and (min-width: 320px) and (max-width: 480px) {
  /* ignored by older browsers */
}

Примечание: Как и в случае с оператором not, при использовании only тип носителя является обязательным. Обратите внимание, что устаревшие браузеры, которые не поддерживают Media Queries level 3, сейчас встречаются редко, поэтому в большинстве случаев only можно не использовать.

Дополнения из Media Queries Level 4

В последнем выпуске спецификации Media Queries Level 4 появилось довольно много новых медиа-функций, которые можно протестировать:

• pointer: определяет, есть ли у вас первичное указывающее устройство (none, coarse и fine).
• any-pointer: определяет, доступно ли какое-либо указывающее устройство (none, coarse и fine).
• hover: определяет, может ли основное указывающее устройство наводить курсор на элементы (none или hover).
• any-hover: определяет, может ли любое из доступных указывающих устройств наводиться на элементы (none или hover).
• color-gamut: диапазон доступных цветов (srgb, p3 или rec2020).
• overflow-inline: способ обработки потенциального переполнения на внутренней оси (none, paged, optional-paged или scroll).
• overflow-block: способ обработки потенциального переполнения на оси блока (none, paged, optional-paged или scroll).
• update: частота, с которой может обновляться макет (none, slow или fast).

Медиа-запросы для дисплеев Retina

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

Чтобы добиться этого, используют медиа-функцию с минимальным разрешением со значением 192 dpi. Однако функция resolution поддерживается не всеми браузерами, и для более надежного подхода можно также добавить дополнительную нестандартную функцию -webkit-min-device-pixel-ratio со значением 2:

@media screen and
  (min-resolution: 192dpi),
  (-webkit-min-device-pixel-ratio: 2) {
    /* ... */
}

Проверить поддержку медиа-функции в браузерах можно на Can I Use.

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

• Медиа-запросы CSS-Tricks для стандартных устройств
• MQTest. io позволяет проверить, на какие мультимедийные функции реагирует ваше устройство.
• Страничка MDN по доступным медиа-функциям.

@media — CSS: Каскадные таблицы стилей

Правило at @media CSS может использоваться для применения части таблицы стилей на основе результата одного или нескольких медиазапросов. С его помощью вы указываете медиа-запрос и блок CSS для применения к документу тогда и только тогда, когда медиа-запрос соответствует устройству, на котором используется контент.

Примечание: В JavaScript к правилам, созданным с использованием @media , можно получить доступ с помощью CSSMediaRule Интерфейс объектной модели CSS.

At-правило @media может быть размещено на верхнем уровне вашего кода или вложено в любое другое at-правило условной группы.

 /* На верхнем уровне вашего кода */
Экран @media и (минимальная ширина: 900 пикселей) {
  статья {
    набивка: 1рем 3рем;
  }
}
/* Вложено в другое условное at-правило */
@supports (отображение: гибкий) {
  Экран @media и (минимальная ширина: 900 пикселей) {
    статья {
      дисплей: гибкий;
    }
  }
}
 

Обсуждение синтаксиса медиазапросов см. в разделе Использование медиазапросов.

Типы носителей

Типы носителей описывают общую категорию устройства. За исключением случаев использования логических операторов не или только , тип носителя является необязательным и подразумевается тип все .

все

Подходит для всех устройств.

печать

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

в постраничных носителях.)

экран

Предназначен в первую очередь для экранов.

Примечание. CSS2.1 и Media Queries 3 определили несколько дополнительных типов носителей ( tty , tv , проекция , карманный компьютер , шрифт Брайля , рельефный , ауральный ), но они устарели в Media Queries 4 и не должны использоваться.

Функции мультимедиа

Функции мультимедиа описывают конкретные характеристики пользовательского агента, устройства вывода или среды. Выражения функций мультимедиа проверяют их наличие или значение и являются совершенно необязательными. Каждое выражение функции мультимедиа должно быть заключено в круглые скобки.

любое наведение

Позволяет ли какой-либо доступный механизм ввода пользователю наводить курсор на элементы? Добавлено в Media Queries Level 4.

любой указатель

Является ли какой-либо доступный механизм ввода указательным устройством, и если да, то насколько он точен? Добавлено в Media Queries Level 4.

соотношение сторон

Соотношение ширины и высоты области просмотра

цвет

Количество битов на компонент цвета устройства вывода или ноль, если устройство не является цветным

цветовая гамма

Приблизительный диапазон цветов, поддерживаемых пользовательским агентом и устройством вывода. Добавлено в Media Queries Level 4.

индекс цвета

Количество записей в таблице поиска цветов устройства вывода или ноль, если устройство не использует такую ​​таблицу

соотношение сторон устройства Not for use in new websites.»> Устаревший

Отношение ширины к высоте выходного устройства. Устарело в медиа-запросах уровня 4.

высота устройства Устаревший

Высота поверхности рендеринга устройства вывода. Устарело в медиа-запросах уровня 4.

ширина устройства Устаревший

Ширина поверхности рендеринга устройства вывода. Устарело в медиа-запросах уровня 4.

режим отображения

Режим отображения приложения, указанный в 9 манифесте веб-приложения.0004 отображать элемент . Определено в спецификации манифеста веб-приложения.

динамический диапазон

Комбинация яркости, контрастности и глубины цвета, поддерживаемая пользовательским агентом и устройством вывода. Добавлено в Media Queries Level 5.

форсированные цвета

Определите, ограничивает ли пользовательский агент цветовую палитру. Добавлено в Media Queries Level 5.

сетка

Использует ли устройство сетку или растровый экран?

высота

Высота области просмотра.

наведение

Позволяет ли первичный механизм ввода пользователю наводить курсор на элементы? Добавлено в Media Queries Level 4.

инвертированные цвета

Пользовательский агент или базовая ОС инвертируют цвета? Добавлено в Media Queries Level 5.

монохромный

бит на пиксель в буфере монохромных кадров выходного устройства или ноль, если устройство не монохромное.

ориентация

Ориентация окна просмотра.

блок перелива

Как устройство вывода обрабатывает контент, который выходит за пределы области просмотра вдоль оси блока? Добавлено в Media Queries Level 4.

встроенный перелив

Можно ли прокручивать содержимое, выходящее за пределы области просмотра вдоль встроенной оси? Добавлено в Media Queries Level 4.

указатель

Является ли первичный механизм ввода указательным устройством, и если да, то насколько оно точное? Добавлено в Media Queries Level 4.

предпочитает цветовую схему

Определите, предпочитает ли пользователь светлую или темную цветовую схему. Добавлено в Media Queries Level 5.

предпочитает контраст

Определяет, запросил ли пользователь у системы увеличение или уменьшение контраста между соседними цветами. Добавлено в Media Queries Level 5.

предпочитает уменьшенное движение

Пользователь предпочитает меньше движений на странице. Добавлено в Media Queries Level 5.

разрешение

Плотность пикселей устройства вывода.

сценарии

Определяет, доступны ли сценарии (например, JavaScript). Добавлено в Media Queries Level 5.

обновление

Как часто устройство вывода может изменять внешний вид содержимого. Добавлено в Media Queries Level 4.

видео-динамический диапазон

Комбинация яркости, коэффициента контрастности и глубины цвета, которые поддерживаются видеоплоскостью агента пользователя и устройства вывода. Добавлено в Media Queries Level 5.

ширина

Ширина области просмотра, включая ширину полосы прокрутки.

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

Логические операторы не , и , только и или могут использоваться для составления сложного медиа-запроса. Вы также можете объединить несколько медиазапросов в одно правило, разделив их запятыми.

и

Используется для объединения нескольких медиа-функций вместе в один медиа-запрос, требующий, чтобы каждая цепочка функций возвращала true , чтобы запрос был true . Он также используется для объединения функций мультимедиа с типами мультимедиа.

не

Используется для отрицания медиа-запроса, возвращая true , если в противном случае запрос вернул бы false . Если он присутствует в списке запросов, разделенных запятыми, он будет отрицать только конкретный запрос, к которому он применяется. Если вы используете оператор , а не , вы должны также указать тип носителя.

Примечание: На уровне 3 ключевое слово , а не не может использоваться для отрицания отдельного выражения функции мультимедиа, а только для всего запроса мультимедиа.

только

Применяет стиль, только если совпадает весь запрос. Это полезно для предотвращения применения выбранных стилей старыми браузерами. Когда не используется только , старые браузеры будут интерпретировать запрос screen и (max-width: 500px) как screen , игнорируя остальную часть запроса и применяя его стили на всех экранах. Если вы используете только оператор , вы должны также указать тип носителя.

, (запятая)

Запятые используются для объединения нескольких медиазапросов в одно правило. Каждый запрос в списке, разделенном запятыми, обрабатывается отдельно от других. Таким образом, если любой из запросов в списке равен true , весь оператор мультимедиа возвращает true . Другими словами, списки ведут себя как логические операторы или .

или

Эквивалент оператора , . Добавлено в Media Queries Level 4.

Чтобы наилучшим образом удовлетворить людей, которые настраивают размер текста на сайте, используйте em s, когда вам нужно для медиа-запросов.

Оба em и px являются допустимыми единицами, но em работает лучше, если пользователь меняет размер текста в браузере.

Также рассмотрите возможность использования мультимедийных запросов уровня 4, чтобы улучшить взаимодействие с пользователем. Например, предпочитает уменьшенное движение , чтобы определить, запросил ли пользователь, чтобы система минимизировала количество используемой анимации или движения.

Поскольку медиа-запросы позволяют получить представление о возможностях — и, в более широком смысле, функциях и дизайне — устройства, с которым работает пользователь, существует вероятность того, что они могут быть использованы для создания «отпечатка пальца», который идентифицирует устройство, или по крайней мере, классифицирует его с некоторой степенью детализации, которая может быть нежелательной для пользователей.

Из-за этой возможности браузер может каким-то образом подделать возвращаемые значения, чтобы предотвратить их использование для точной идентификации компьютера. Браузер также может предлагать дополнительные меры в этой области; например, если в Firefox включен параметр «Защита от отпечатков пальцев», многие медиа-запросы сообщают значения по умолчанию, а не значения, представляющие фактическое состояние устройства.

 @media = 
 @media  {  } 

Тестирование типов носителей для печати и экрана

 @медиа печать {
  тело {
    размер шрифта: 10pt;
  }
}
@медиаэкран {
  тело {
    размер шрифта: 13px;
  }
}
@медиаэкран, распечатать {
  тело {
    высота строки: 1,2;
  }
}
Только экран @media и (минимальная ширина: 320 пикселей) и (максимальная ширина: 480 пикселей) и (разрешение: 150 точек на дюйм) {
  тело {
    высота строки: 1,4;
  }
}
 

В Media Queries Level 4 представлен новый синтаксис диапазона, который позволяет использовать менее подробные медиа-запросы при тестировании любой функции, принимающей диапазон, как показано в следующих примерах:

 @медиа (высота > 600 пикселей) {
  тело {
    высота строки: 1,4;
  }
}
@media (400 пикселей <= ширина <= 700 пикселей) {
  тело {
    высота строки: 1,4;
  }
}
 

Дополнительные примеры см. в разделе Использование медиа-запросов.

Только таблицы BCD загрузить в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

• Использование медиа-запросов
• В JavaScript к @media можно получить доступ через интерфейс объектной модели CSS CSSMediaRule .
• Расширенные функции мультимедиа Mozilla
• Расширенные мультимедийные функции WebKit

Обнаружили проблему с содержанием этой страницы?

• Отредактируйте страницу на GitHub.
• Сообщить о проблеме с содержимым.
• Просмотрите исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 1 апреля 2023 участниками MDN.

CSS Медиа-запросы и адаптивный дизайн

Вы можете заметить, что некоторые из ваших часто посещаемых веб-сайтов выглядят на вашем телефоне немного иначе, чем в браузере на компьютере. Изменение внешнего вида веб-сайта в зависимости от устройства, на котором он просматривается, — важная функция CSS, обеспечивающая качественное восприятие на любом устройстве. В этом уроке мы узнаем больше об адаптации вашего сайта для разных размеров экрана с помощью медиа-запросов.

Кодирование вашего сайта, чтобы он выглядел по-разному в зависимости от размера экрана, на котором он просматривается, называется адаптивным веб-дизайном . В сфере адаптивного веб-дизайна экран, используемый для просмотра сайта, обычно называют окном просмотра .

Но как выглядит адаптивный дизайн? Как сайт должен выглядеть на маленьком экране по сравнению с большим экраном? Прежде чем мы начнем, посетите следующие два веб-сайта, чтобы увидеть несколько примеров адаптивного дизайна. Каждый сайт отображает макеты многих разных веб-сайтов, и их стили выглядят по-разному в зависимости от размера области просмотра пользователя:

• Адаптивный дизайн
• mediaqueri.es

Сделать сайт адаптивным

Но как сделать наши собственные сайты адаптивными? Как он узнает, когда использовать стили, предназначенные для меньших окон просмотра, и когда применять стили, предназначенные для больших? К счастью, это на самом деле проще, чем вы могли ожидать.

Чтобы сделать сайты отзывчивыми, мы можем использовать медиа-запросы CSS. Медиа-запрос — это блок CSS, который применяется только , когда выполняются определенные условия в области просмотра пользователя. Например, CSS, упакованный в медиа-запрос, который определяет максимальную ширину 500 пикселей, будет применяться только в том случае, если ширина области просмотра пользователя меньше 500 пикселей.

Практика медиа-запросов

Давайте вместе рассмотрим создание медиа-запросов. Это позволит нам как понять их конструкцию, так и увидеть, как они выглядят в действии.

Мы создадим каталог проекта с именем media-query-practice . Внутри него нам понадобится файл .html с именем media-query-site.html и еще один каталог с именем css . В каталоге css мы создадим файл с именем styles.css 9.0005 .

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

 media-query-practice
├── CSS
│   └── стили.css
└── медиа-запрос-сайт.html
 

Обязательно инициализируйте репозиторий Git в корневом каталоге, чтобы быть готовым к коммитам.

Далее добавим простой HTML:

media-query-site.html

 

<голова>
  
  

<тело>
   
Медиа-запросы
 
  <дел>
    
Медиа-запросы позволяют нам сделать наши сайты отзывчивыми.  Мы можем использовать медиа-запросы для применения стилей CSS только при соблюдении определенных условий. Например, наши сайты могут выглядеть по-разному в зависимости от размера экрана или порта просмотра, в котором пользователь просматривает наш контент. Мы также можем изменить способ отображения нашего сайта, если пользователь печатает наш сайт или использует программу чтения с экрана!