Правило @media определяет набор стилей, который применяется только к конкретному типу носителя.
Медиа-запросы являются распространенным методом для создания адаптивного веб-дизайна компьютеров, ноутбуков, планшетов и мобильных телефонов.
Кроме медиа-типов, есть еще медиа-функции, которые имеют названия и принимают значения подобно свойствам. Но есть различия между свойствами и функциями:
- Свойства не могут работать без значений, а при функциях значения могут и не использоваться.
- Функции, в отличии от свойств, могут иметь только одно значение.
Медиа-запросы используются для:
- Ширины и высоты окна просмотра
- Ширины и высоты устройства
- Ориентации экрана
- Разрешения экрана
| Значение по умолчанию | all |
| Применяется | К конкретным медиа-типам. |
| Наследуется | Нет |
| Анимируемое | Да |
| Версия | Media Queries, CSS2 |
| DOM синтаксис | object.style.@media = "screen and (min-width: 500px)"; |
Синтаксис
@media: media-type (and media-query-feature);Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
body {
background-color: #1c87c9;
}
@media screen and (max-width: 411px) {
body {
background-color: #cce5ff;
}
}
@media screen and (min-width: 768px) {
body {
background-color: #eee;
}
}
@media screen and (max-width: 962px) and (min-width: 450px), (min-width: 1366px) {
background-color: #333;
}
</style>
</head>
<body>
<h2>Пример правила @media</h2>
<p>Измените размер браузера чтобы увидеть эффект.</p>
<p>Медиа-запросы устанавливают светло-серый как фоновый цвет, если окно просмотра имеет ширину 600 px или больше, а если окно просмотра имеет ширину от 200 до 599 px, то устанавливается зеленый цвет. Если окно просмотра меньше 200 px, фоновый цвет будет синим.</p>
</body>
</html>В следующем примере, где браузер имеет ширину в пределах от 500 и 800 px или больше 1000px, внешний вид <div> элемента меняется:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
body {
background-color: #1c87c9;
}
@media screen and (min-width: 200px) {
body {
background-color: #8ebf42;
}
}
@media screen and (min-width: 600px) {
body {
background-color: #ccc;
}
}
@media screen and (max-width: 800px) and (min-width: 500px), (min-width: 1000px) {
div.box {
font-size: 50px;
padding: 50px;
border: 8px solid #000;
background: #eee;
}
}
</style>
</head>
<body>
<h2>Пример правила @media</h2>
<p>Медиа-запросы устанавливают светло-серый как фоновый цвет, если окно просмотра имеет ширину 600 px или больше, а если окно просмотра имеет ширину от 200 до 599 px, то устанавливается зеленый цвет. Если окно просмотра меньше 200 px, фоновый цвет будет синим.</p>
<h3>Измените внешний вид DIV при разных размерах экрана</h3>
<div class="box">DIV</div>
</body>
</html>Медиа-типы
| Значение | Описание |
|---|---|
| all | Используется для всех устройств. Значение по умолчанию. |
| Используется для принтеров. | |
| screen | Используется для компьютеров с цветным дисплеем. |
| speech | Используется для речевых синтезаторов. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Медиа-функции
| Значение | Описание |
|---|---|
| width | Ширина окна просмотра. css2 |
| height | Высота окна просмотра. |
| orientation | Ориентация окна просмотра. |
| scan | Сканирование окна просмотра. |
| aspect-ratio | Соотношение ширины и высоты. |
| grid | Определяет, основано ли выходное устройство на сеточной системе или на растровой графике. |
| color | Определяет количество бит на цветовой компонент выходного устройства. Если устройство не является цветным, значением будет 0. |
| color-gamut | Примерная шкала цветов, поддерживаемая пользовательским агентом и выходным устройством. |
| color-index | Определяет количество компонентов таблицы цветов выходного устройства. Если устройство не использует таблицу цветов, значением будет 0. |
| inverted-colors | Определяет, может ли браузер или операционная система инвертировать цвета. |
| hover | Определяет, дает ли возможность первичный механизм ввода навести указатель мыши на элемент. |
| any-hover | Определяет, дает ли возможность доступный механизм ввода навести указатель мыши на элемент. |
| any-pointer | Определяет, является ли доступный механизм ввода указывающим устройством или нет. |
| light-level | Определяет уровень яркости. |
| max-aspect-ratio | Максимальное соотношение ширины и высоты отображаемой области. |
| max-color | Максимальное количество бит на каждый цветовой компонент выходного устройства. |
| max-color-index | Максимальное количество цветов, которое может отобразить браузер. |
| max-height | Максимальная высота отображаемой области. |
| max-monochrome | Максимальное количество бит на цвет на монохромном устройстве. |
| max-resolution | Максимальное разрешение устройства. |
| max-width | Максимальная ширина отображаемой области. |
| min-aspect-ratio | Минимальное соотношение ширины и высоты отображаемой области. |
| min-color | Минимальное количество бит на каждый цветовой компонент выходного устройства. |
| min-color-index | Минимальное количество цветов, которое может отобразить браузер. |
| min-height | Минимальная высота отображаемой области. |
| min-monochrome | Минимальное количество бит на цвет на монохромном устройстве. |
| min-resolution | Минимальное разрешение устройства. |
| min-width | Минимальная ширина отображаемой области. |
| monochrome | Определяет количество бит на пиксель. Если устройство не является монохромным, значением будет 0. |
| orientation | Ориентация окна просмотра. |
| overflow-block | Определяет, каким образом выходное устройство контролирует контент, который выходит за границы окна просмотра по направлению оси блока. |
| overflow-inline | Определяет, может ли прокручиваться контент, который выходит за границы окна просмотра по направлению строчной оси. |
| pointer | Определяет, является ли первичный механизм ввода указывающим устройством. |
| resolution | Определяет разрешение выходного устройства. |
| scripting | Определяет, доступны ли языки сценариев. |
| update | Определяет, как быстро выходное устройство может изменить внешний вид контента. |
Поддержка браузера
|
|
|
|
|
|---|---|---|---|---|
| 1.0+ | ✓ | 1.0+ | 1.3+ | 9.2+ |
Практикуйте свои знания
Что такое CSS @media правило?
Правильный!
Неправильно!