CSS @media Rule
Пример
Измените цвет фона элемента <BODY> на "lightblue", если окно обозревателя 600px широко или менее:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Подробнее примеры ниже.
Определение и использование
Правило @media используется в запросах мультимедиа для применения различных стилей для различных типов носителей/устройств.
Мультимедийные запросы можно использовать для проверки многих вещей, таких как:
- Ширина и высота видового экрана
- Ширина и высота устройства
- ориентация (планшет/телефон в альбомном или книжном режиме?)
- Разрешение
Использование мультимедийных запросов — популярный способ доставки адаптированной таблицы стилей (Адаптивный веб-дизайн) к настольным компьютерам, ноутбукам, планшетам и мобильным телефонам.
Можно также использовать запросы мультимедиа, чтобы указать, что определенные стили предназначены только для печатных документов или для чтения с экрана (MediaType: печать, экран или речь).
В дополнение к типам носителей, есть также функции мультимедиа. Функции мультимедиа предоставляют более подробные сведения о мультимедийных запросах, позволяя тестировать конкретную функцию агента пользователя или устройства отображения. Например, можно применить стили только к тем экранам, которые больше или меньше определенной ширины.
Поддержка браузера
Номера в таблице указывают первую версию обозревателя, полностью поддерживающую правило @media.
| Свойство | |||||
|---|---|---|---|---|---|
| @media | 21 | 9 | 3.5 | 4.0 | 9 |
Синтаксис CSS
@media not|only mediatype and (media feature and|or|not
mediafeature) {
CSS-Code;
}
значение не, только и и ключевые слова:
Нет: Ключевое слово NOT возвращает значение всего мультимедийного запроса.
только: Ключевое слово only предотвращает применение указанных стилей к старым обозревателям, которые не поддерживают запросы мультимедиа с функциями мультимедиа. Он не влияет на современные браузеры.
и: Ключевое слово and объединяет мультимедийный объект с типом носителя или другими мультимедийными функциями.
Все они необязательны. Однако при использовании Not или onlyнеобходимо также указать тип носителя.
Можно также иметь различные таблицы стилей для различных носителей, например:
<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 | Используется для скринреадерс, что "читает" страницы вслух |
Media Features
| Значение | Описание |
|---|---|
| any-hover | Позволяет ли любой доступный механизм ввода пользователю навести курсор на элементы? (Добавлено в Media запросы уровень 4) |
| any-pointer | Есть ли доступный механизм ввода указывающего устройства, и если да, то насколько он точен? (Добавлено в Media запросы уровень 4) |
| aspect-ratio | Соотношение между шириной и высотой видового экрана |
| color | Число битов на компонент цвета для устройства вывода |
| color-gamut | Приблизительный диапазон цветов, поддерживаемых агентом пользователя и устройством вывода (Добавлено в Media запросы уровень 4) |
| color-index | Количество цветов, которые может отображать устройство |
| grid | Является ли устройство сеткой или растровым изображением |
| height | Высота видового экрана |
| hover | Позволяет ли основной входной механизм пользователю навести курсор на элементы? (Добавлено в Media запросы уровень 4) |
| inverted-colors | Браузер или базовая операционная система переворачивают цвета? (Добавлено в Media запросы уровень 4) |
| light-level | Текущий уровень освещенности (добавлен в Media-запросах уровень 4) |
| max-aspect-ratio | Максимальное соотношение между шириной и высотой области отображения |
| max-color | Максимальное число битов на компонент цвета для устройства вывода |
| max-color-index | Максимальное количество цветов, которое может отображать устройство |
| max-height | Максимальная высота области отображения, например окно обозревателя |
| max-monochrome | Максимальное количество битов на "цвет" на монохромном устройстве (в оттенках серого) |
| max-resolution | Максимальное разрешение устройства с помощью dpi или DPCM |
| max-width | Максимальная ширина области отображения, например окно обозревателя |
| min-aspect-ratio | Минимальное соотношение между шириной и высотой области отображения |
| min-color | Минимальное количество битов на компонент цвета для устройства вывода |
| min-color-index | Минимальное количество цветов, которое может отображать устройство |
| min-height | Минимальная высота области отображения, например окно обозревателя |
| min-monochrome | Минимальное количество битов на "цвет" на монохромном устройстве (в оттенках серого) |
| min-resolution | Минимальное разрешение устройства с помощью dpi или DPCM |
| min-width | Минимальная ширина области отображения, например окно обозревателя |
| monochrome | Количество битов на "цвет" на монохромном устройстве (в оттенках серого) |
| orientation | Ориентация видового экрана (ландшафтный или книжный режим) |
| overflow-block | Как устройство вывода обрабатывает содержимое, переполненное видовым экраном вдоль оси блока (Добавлено в Media запросы уровень 4) |
| overflow-inline | Можно прокручивать содержимое, переполненное видовым экраном вдоль встроенной оси (Добавлено в Media-запросах уровень 4) |
| pointer | Является ли основной входной механизм указывающим устройством, и если да, то насколько он точен? (Добавлено в Media запросы уровень 4) |
| resolution | Разрешение выходного устройства с помощью dpi или DPCM |
| scan | Процесс сканирования устройства вывода |
| scripting | Доступны ли скрипты (например, JavaScript)? (Добавлено в Media запросы уровень 4) |
| update | Как быстро устройство вывода может изменить внешний вид содержимого (Добавлено в Media запросы уровень 4) |
| width | Ширина видового экрана |
Другие примеры
Пример
Скрытие элемента, если ширина обозревателя 600px шириной или меньше:
@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%;
}
}
Пример
Используйте запросы мультимедиа для создания адаптивного макета столбца:
/* On screens that are 992px wide or less, go from four columns to two
columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack
on top of each other instead of next to each other */
@media screen and (max-width:
600px) {
.column {
width: 100%;
}
}
Пример
Используйте запросы мультимедиа для создания адаптивного веб-сайта:
Пример
Мультимедийные запросы также можно использовать для изменения макета страницы в зависимости от ориентации браузера. Вы можете иметь набор свойств CSS, которые будут применяться только в том случае, если окно обозревателя шире, чем его высота, так называемая "Landscape" ориентация.
Используйте цвет фона лигхтблуе, если ориентация находится в альбомном режиме:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Пример
Используйте медиакуериес, чтобы задать цвет текста зеленым цветом, когда документ отображается на экране, и черным при печати:
@media screen {
body {
color: green;
}
}
@media print {
body {
color: black;
}
}
Пример
Список разделенных запятыми: добавьте дополнительный мультимедийный запрос к уже существующему, используя запятую (это будет вести себя как оператор OR):
/* When the width is between 600px and 900px OR above 1100px - change the
appearance of <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 Media Queries
CSS Справочник: CSS Media Queries Examples
RWD Tutorial: Responsive Web Design with Media Queries
JavaScript Tutorial: The window.matchMedia() method