Описание тега media-queries

Описание тега Вопросы с тегом

Запросы мультимедиа позволяют условное применение стилей CSS на основе типов мультимедиа, таких как экран и печать, а также условий мультимедийных функций, таких как область просмотра, высота и ширина устройства. Они являются частью спецификации W3C CSS3.

CSS Media Queries позволяют вам ограничить объем правил CSS, например, в зависимости от размера экрана, ориентации устройства или плотности отображения. Представленные в спецификации CSS3, использование медиа-запросов стало де-факто стандартом создания веб-сайтов с адаптивным дизайном.

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

<!-- Media Query on a link element -->
<link rel="stylesheet" href="style.css" media="(max-width: 750px)" />

<!-- Media Query within a stylesheet -->
<style>
@media (max-width: 750px) {
  footer {
    display: none;
  }
}
</style>

ПРИМЕЧАНИЕ. Таблицы стилей, к которым прикреплены медиа-запросы.<link>элементы все равно будут загружаться, даже если их медиа-запросы вернутfalse.

Типы медиа-запросов

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

Выражения медиа-запроса

Выражения медиа-запросов можно создавать с помощью логических операторов and, not, а также only. Кроме того, выражения, разделенные запятыми, образуют оператор "или".

В andОператор используется для объединения нескольких мультимедийных функций в один запрос. Каждая функция должна возвращатьсяtrue чтобы весь запрос оценивался как true.
В min-width а также min-device-widthтермины означает больше или равно. по аналогииmax-widthозначает меньше или равно.
```
@media (min-width: 650px) and (orientation: landscape) { ... }
```
В notОператор должен использоваться с явным типом мультимедиа и используется для изменения логики всего медиа-запроса.
```
@media not all and (max-width: 650px) { ... }
```
В onlyОператор должен использоваться с явным типом мультимедиа и сообщает старым браузерам не обрабатывать запрос.
```
@media only print { ... }
```
Выражения, разделенные запятыми, оценивают каждое выражение с оператором "или" между ними.
```
@media (max-width: 600px), (min-width: 800px) { ... }
```

Дополнительная информация о медиа-запросах CSS