СSS Свойство СSS3 Правило @media
Пример
Изменить цвет фона элемента <body> на "lightblue", когда окно браузера будет иметь ширину 600 пикселей или меньше:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Редактор кода »
Определение и использование
Правило @media используется в запросах мультимедиа для применения различных стилей для различных типов носителей/устройств.
Медиа-запросы могут использоваться для проверки многих вещей, таких как:
- ширина и высота окна просмотра
- ширина и высота устройства
- ориентация (планшет/телефон находится в альбомном или портретном режиме?)
- разрешение
Использование медиа-запросов популярный метод обеспечения адаптированной таблицы стилей (адаптивного веб-дизайна) для настольных компьютеров, ноутбуков, планшетов и мобильных телефонов.
Вы также можете использовать запросы мультимедиа, чтобы указать, что определенные стили предназначены только для печатных документов или для чтения с экрана (тип носителя: print, screen, или speech).
В дополнение к типам носителей, есть также функции мультимедиа. Функции мультимедиа предоставляют более подробные сведения для запросов мультимедиа, позволяя тестировать определенные функции пользовательского агента или устройства отображения. Например, стили можно применять только к тем экранам, которые больше или меньше определенной ширины.
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает правило @media.
| Свойство | |||||
|---|---|---|---|---|---|
| @media | 21 | 9 | 3.5 | 4.0 | 9 |
CSS Синтаксис
@media not|only mediatype и (mediafeature and|or|not
mediafeature) {
CSS-Code;
}
значение слова not, only и and ключевое слово:
not: Ключевое слово not возвращает значение всего запроса мультимедиа.
only: Ключевое слово only предотвращает применение указанных стилей в старых браузерах, которые не поддерживают запросы мультимедиа с функциями мультимедиа. Это не влияет на современные браузеры.
and: Ключевое слово and объединяет функцию мультимедиа с типом мультимедиа или другими функциями мультимедиа.
Все они являются необязательными. Однако, если вы используете not или only, также необходимо указать тип носителя.
Вы также можете иметь разные stylesheets для различных мультимедиа носителей, как это:
<link rel="stylesheet" media="screen and (min-width:
900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width:
600px)" href="smallscreen.css">
....
Media Types
| Значение | Описание |
|---|---|
| all | По умолчанию. Используется для всех устройств типа носитель |
| Используется для принтеров | |
| screen | Использованный для экранов компьютера, планшетов, смарт-телефонов и т.д. |
| speech | Используется для чтения с экрана, который "читает" страницу вслух |
Мультимедийные возможности
| Значение | Описание |
|---|---|
| any-hover | Позволяет ли какой-либо доступный механизм ввода пользователю наводить курсор на элементы? (добавлено в Медиа запросы Уровень 4) |
| any-pointer | Является ли какой-либо доступный механизм ввода указательным устройством, и если да, то насколько он точен? (добавлено в Медиа запросы Уровень 4) |
| aspect-ratio | Соотношение между шириной и высотой окна просмотра |
| color | Количество бит на цветовой компонент для устройства вывода |
| color-gamut | Приблизительный диапазон цветов, поддерживаемых агентом пользователя и устройством вывода (добавлено в Медиа запросы Уровень 4) |
| color-index | Количество цветов, которые может отображать устройство |
| grid | Является ли устройство сеткой или растровым изображением |
| height | Высота области просмотра |
| hover | Позволяет ли основной механизм ввода пользователю наводить курсор на элементы? (добавлено в Медиа запросы Уровень 4) |
| inverted-colors | Является ли браузер или базовая ОС инвертирующими цветами? (добавлено в Медиа запросы Уровень 4) |
| light-level | Текущий уровень рассеянного света (добавлен в Медиа запросы Уровень 4) |
| max-aspect-ratio | Максимальное соотношение между шириной и высотой экрана |
| max-color | Максимальное количество бит на цветовой компонент для устройства вывода |
| max-color-index | Максимальное количество цветов, которое может отображать устройство |
| max-height | Максимальная высота области отображения, например окна браузера |
| max-monochrome | Максимальное количество бит на "color" на monochrome (в оттенках серого) устройстве |
| max-resolution | Максимальное разрешение устройства, используя dpi или dpcm |
| max-width | Максимальная ширина области отображения, например окна браузера |
| min-aspect-ratio | Минимальное соотношение между шириной и высотой области отображения |
| min-color | Минимальное количество бит на цветовой компонент для устройства вывода |
| min-color-index | Минимальное количество цветов, которое может отображать устройство |
| min-height | Минимальная высота области отображения, например окна браузера |
| min-monochrome | Минимальное количество бит на "color" на monochrome (в оттенках серого) устройстве |
| min-resolution | Минимальное разрешение устройства, используя dpi или dpcm |
| min-width | Минимальная ширина области отображения, например окна браузера |
| monochrome | Количество бит на "цвет" на монохромном (в оттенках серого) устройстве |
| orientation | ориентация области просмотра экрана (альбомный или книжный режим) |
| overflow-block | Как устройство вывода обрабатывает содержимое, которое переполняет область просмотра экрана вдоль оси блока (добавлен в Медиа запросы Уровень 4) |
| overflow-inline | Можно ли прокручивать содержимое, которое переполняет область просмотра экрана вдоль встроенной оси (добавлен в Медиа запросы Уровень 4) |
| pointer | Является ли основной входной механизм указательным устройством, и если да, то насколько он точен? (добавлен в Медиа запросы Уровень 4) |
| resolution | Разрешение устройства вывода, используя dpi или dpcm |
| scan | Процесс сканирования выходного устройства |
| scripting | Доступен ли сценарий (например, JavaScript)? (добавлен в Медиа запросы Уровень 4) |
| update | Как быстро устройство вывода может изменить внешний вид содержимого (добавлен в Медиа запросы Уровень 4) |
| width | Ширина области просмотра экрана |
Примеры
Пример
Скрыть элемент, если ширина браузера составляет 600 пикселей в ширину или меньше:
@media screen and (max-width: 600px) {
div.example {
display:
none;
}
}
Редактор кода »
Пример
Использовать запросы мультимедиа, чтобы установить цвет фона в лавандовый, если видовой экран имеет ширину 800 пикселей или шире, в светло-зеленый, если видовой экран имеет ширину от 400 до 799 пикселей. Если видовой экран меньше 400 пикселей, цвет фона будет светло-синим:
body {
background-color: lightblue;
}
@media screen and (min-width:
400px) {
body {
background-color: lightgreen;
}
}
@media
screen and (min-width: 800px) {
body {
background-color: lavender;
}
}
Редактор кода »
Пример
Создать адаптивное меню навигации (отображается горизонтально на больших экранах и вертикально на маленьких экранах):
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
Редактор кода »
Пример
Использовать запрос мультимедиа для создания адаптивного макета столбцов:
/* На экранах шириной 992px или меньше перейти от четырех столбцов к двум
столбцам */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* На экранах шириной 600 пикселей или меньше сделать столбцы стеком
на вершине друг друга, а не рядом друг с другом */
@media screen and (max-width:
600px) {
.column {
width: 100%;
}
}
Редактор кода »
Пример
Медиа-запросы также можно использовать для изменения макета страницы в зависимости от ориентации браузера. Вы можете иметь набор свойств CSS, которые будут применяться только тогда, когда окно браузера шире, чем его высота, так называемая "ландшафтная" ориентация.
Использовать светло-синий цвет фона, если ориентация находится в альбомном режиме:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Редактор кода »
Пример
С помощью запросов мультимедиа можно задать зеленый цвет текста при отображении документа на экране и черный при печати:
@media screen {
body {
color: green;
}
}
@media print {
body {
color: black;
}
}
Редактор кода »
Пример
Список, разделенный запятыми: добавить дополнительный медиа-запрос к уже существующему, используя запятую (это будет вести себя как оператор OR):
/* Если ширина находится между 600px и 900px или выше 1100px - измените
внешний вид <div> */
@media screen and (max-width: 900px) and
(min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Редактор кода »
Связанные страницы
CSS Учебник: CSS Медиа запросы
CSS Учебник: CSS Медиа запросы примеры
RWD Учебник: Адаптивный веб-дизайн с Медиа запросами
JavaScript Учебник: Метод window.matchMedia()
