CSS Медиа запросы
CSS2 Введенные медиа типы
Правило @media введенное в CSS2, позволило определять различные правила стиля для разных типов медиа.
Примеры: у вас может быть один набор правил стилей для экранов компьютеров, один для принтеров, один для портативных устройств, один для телевизионных устройств и т.д.
К сожалению, эти медиа типы никогда не получали большой поддержки со стороны устройств, кроме типа печатных носителей.
CSS3 Введенные медиа-запросы
Медиа-запросы в CSS3 расширили идею медиа типов в CSS2: вместо того чтобы искать тип устройства, они смотрят на возможности устройства.
Медиа-запросы могут использоваться для проверки многих вещей, таких как:
- ширина и высота области просмотра
- ширина и высота устройства
- ориентация (планшет / телефон в альбомном или портретном режиме?)
- разрешение экрана
Использование медиазапросов - это популярный метод доставки адаптивной таблицы стилей на настольные компьютеры, ноутбуки, планшеты и мобильные телефоны (например, телефоны iPhone и Android).
Поддержка браузерами
Числа в таблице указывают первую версию браузера, которая полностью поддерживает правило @media.
| Свойство | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Синтаксис медиа-запроса
Медиа-запрос состоит из медиа-типа и может содержать одно или несколько выражений, которые могут принимать значение true или false.
@media not|only mediatype and (выражения) {
CSS-Code;
}
Результат запроса равен true, если указанный тип мультимедиа соответствует типу устройства, на котором отображается документ, и все выражения в мульти-медиа запросе имеют значение true. Когда медиа-запрос имеет значение true, применяются соответствующие таблицы стилей или правила стилей в соответствии с обычными правилами каскадирования.
Если вы не используете операторы not или only, тип носителя является необязательным, и подразумевается тип all (т.е. все).
Вы также можете иметь разные таблицы стилей для разных медиа:
<link rel="stylesheet" media="mediatype and|not|only (выражения)"
href="print.css">
CSS3 Типы медиа
| Значение | Описание |
|---|---|
| all | Используется для всех медиа-устройств |
| Используется для принтеров | |
| screen | Используется для экранов компьютеров, планшетов, смартфонов и т.д. |
| speech | Используется для программ чтения с экрана (скринридеров), которые "читают" страницу вслух |
Медиа-запросы. Простые примеры
Один из способов использования медиазапросов - иметь альтернативный раздел CSS прямо внутри таблицы стилей.
В следующем примере цвет фона изменяется на светло-зеленый, если область просмотра имеет ширину 480 пикселей или шире (если область просмотра меньше 480 пикселей, цвет фона будет розовым):
Пример
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Попробуйте сами »
В следующем примере показано меню, которое будет всплывать слева от страницы, если область просмотра имеет ширину 480 пикселей или шире (если область просмотра меньше 480 пикселей, меню будет отображаться поверх содержимого):
Пример
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}
Попробуйте сами »
Больше примеров медиа-запросов
Чтобы увидеть больше примеров по медиа-запросам, перейдите на следующую страницу: CSS Медиа-запросы. Примеры на нашем сайте W3Schools на русском.
CSS Справочник @media
Для полного обзора всех типов медиа и функций / выражений, пожалуйста, посмотрите в CSS Справочнике @media правил.
