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

Медиа-запросы (media queries) – это функциональность CSS, позволяющая адаптировать стили веб-страницы к характеристикам устройства пользователя.

Основная цель медиа-запросов – создание адаптивного дизайна. Такой подход обеспечивает комфортное отображение веб-страниц на устройствах с разными размерами экранов, от смартфонов до больших мониторов.

Для корректной работы адаптивного дизайна важен метатег viewport, который указывается в разделе <head> HTML-документа. Этот метатег помогает браузеру интерпретировать ширину экрана устройства и масштаб отображения страницы. Без него адаптивные стили могут работать некорректно.

Пример подключения метатега viewport:\

 <meta name="viewport" content="width=device-width, initial-scale=1"> 

Общий синтаксис медиа-выражения:

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

здесь:

• тип устройства (опционально) – определяет, для каких устройств применяются стили (например, screen или print). Если тип не указан, запрос будет применяться ко всем устройствам.
• характеристика — указывает параметры устройства, такие как min-width, orientation и так далее.
• and - логический оператор, применяемый для комбинирования нескольких условий, так же применяются операторы not и запятая (,), которая действует как логическое «или».

Пример:

 @media (min-width: 768px) and (max-width: 1440px) 

Тип устройства определяет, каким образом веб-страница будет отображаться на разных устройствах.\ Существуют следующие стандартные типы устройств:

• all – применяется ко всем устройствам, включая экраны и принтеры. Этот тип часто используется, когда нужно создать универсальные стили.
• print – используется для принтеров или в режиме предварительного просмотра перед печатью. Этот тип помогает адаптировать страницу под формат печати, например, скрывать ненужные элементы.
• screen – применяется для экранных устройств (например, компьютеры, планшеты, смартфоны). Это наиболее часто используемый тип для отображения на устройствах с экранами.
• speech – используется для устройств и программ, предназначенных для чтения с экрана (например, для пользователей с нарушениями зрения).

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

 @media screen { /* стили для экранов */ } 

Медиа-характеристики (или медиа-функции) позволяют задавать условия, связанные с особенностями устройства или окружения. Они используются в @media для применения стилей при выполнении определённых условий, например, для ширины, высоты, ориентации экрана и плотности пикселей. Каждая характеристика должна быть заключена в круглые скобки.

Для создания диапазонов или ограничения значений используются префиксы min- (минимум) и max- (максимум).

• min- задаёт минимальное значение характеристики, при котором стили будут применяться.
• max- задаёт максимальное значение характеристики.

Эти префиксы удобны для адаптивного дизайна, когда нужно ограничить действие стилей только в нужных диапазонах или при определённых минимальных/максимальных значениях.

Примеры использования медиа-характеристик:

width – ширина области просмотра:

 @media (min-width: 768px) { ... } /* Ширина экрана больше 768px /// @media (max-width: 1399.98px) { ... } /// Ширина экрана меньше 1400px /// @media (min-width: 576px) and (max-width: 1199.98px) { ... } /// Диапазон ширины */ 

height – высота области просмотра:

 @media (min-height: 720px) { ... } /* Высота экрана больше 720px */ orientation – ориентация экрана (альбомная или портретная): 

 @media (orientation: landscape) { ... } /* Альбомная ориентация /// @media (orientation: portrait) { ... } /// Портретная ориентация */ 

aspect-ratio – соотношение сторон области просмотра:

 @media (min-aspect-ratio: 9/16) { ... } /* Минимальное соотношение сторон 9:16 /// @media (max-aspect-ratio: 16/9) { ... } /// Максимальное соотношение сторон 16:9 */ 

resolution – плотность пикселей:

 @media (min-resolution: 150dpi) { ... } /* Минимальная плотность 150 dpi /// @media print and (min-resolution: 300dpi) { ... } /// Для печати с плотностью более 300 dpi */ 

Логические операторы, такие как and, «,» (запятая), not и only, используются для создания сложных медиа-запросов, которые позволяют точнее управлять отображением страницы в зависимости от различных условий устройства.

and - Оператор and объединяет несколько условий, и медиа-запрос будет применяться только в том случае, если все условия истинны.

Медиа-запрос, который применяется только тогда, когда выполняются все условия (тип устройства – экран, ширина экрана ≥ 1200px и ориентация – ландшафтная):

 @media screen and (min-width: 1200px) and (orientation: landscape) { /* стили */ } 

, (запятая) - Запятая действует как логический оператор «ИЛИ». Если хотя бы одно из указанных условий истинно, то стили будут применяться. Это полезно, когда нужно учитывать несколько вариантов условий.

Следующий медиа-запрос применяется, если выполняется хотя бы одно из условий: ширина экрана ≥ 544px или ориентация – портретная:

 @media (min-width: 544px), (orientation: portrait) { /* стили */ } 

not - oператор not используется для отрицания условий. Он позволяет исключить определённые стили, если они не соответствуют заданным параметрам.

• Когда используется not с and, отрицание применяется ко всему медиа-запросу. В таком случае обязательно указывать тип устройства.
• При использовании not в выражении с запятой, отрицание применяется только к отдельному условию.

Пример с and. Стили будут применяться, если не выполняются все три условия (не экран, не ширина ≥ 411px и не высота ≥ 731px):

 @media not screen and (min-width: 411px) and (min-height: 731px) { /* стили */ } 

Пример с запятой. Стили будут применяться, если хотя бы одно из условий ложно (не экран или не ширина ≥ 411px):

 @media not screen, not (min-width: 411px) { /* стили */ } 

only - Оператор only используется для ограничения применения медиа-запроса к тем браузерам, которые поддерживают указанное условие. В основном он был нужен для старых браузеров, не поддерживающих CSS3 медиа-запросы. Сейчас большинство современных браузеров поддерживают все необходимые характеристики, и использование only стало избыточным. Однако, если нужно исключить старые браузеры, поддерживающие только старые версии медиа-запросов, его можно использовать.

Медиа-запрос, который применяется только в браузерах, поддерживающих CSS3:

 @media only screen and (max-width: 600px) { /* стили */ } 

.

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

Важно помнить, что внутри скобок для объединения условий с логикой «ИЛИ» следует использовать оператор or, а не запятую.

Пример использования вложенных скобок:

 @media screen and (((min-width: 600px) and (max-width: 1024px)) or (max-width: 480px)) { body { background-color: green; } } 

В этом примере, основное условие – это screen и условия, заключенные во вложенные скобки.\ Стили будут применяться только на устройствах с экранами (screen), и если выполняются условия во вложенных скобках. Внутри этих скобок объединены два условия с помощью оператора or:

• (min-width: 600px) and (max-width: 1024px) – стили применяются, если ширина экрана находится в диапазоне от 600px до 1024px;
• (max-width: 480px) – стили применяются, если ширина экрана меньше или равна 480px.

Этот медиа-запрос активируется, если выполняются следующие условия:

• Устройство – экран (screen);
• Ширина экрана находится в диапазоне от 600px до 1024px, или меньше или равна 480px.