CSS2 Введенные медиа типы
Правило @media введенное в CSS2, позволило определить различные правила стиля для различных типов носителей.
Примеры: Вы можете иметь один набор правил для компьютерных экранов, для принтеров, для портативных приборов, для типа телевизионных приборов, и так далее.
К сожалению, эти типы носителей не получали хорошей поддержки от устройств, других, чем печатного медиа типа.
CSS3 Введенные медиа запросы
Медиа запросы в CSS3 расширили идею типов носителей CSS2: вместо поиска типа устройства, они смотрят на возможности устройства.
Медиа запросы могут использоваться для проверки многих вещей, таких как:
- ширина и высота окна просмотра
- ширина и высота устройства
- ориентация (планшет/телефон находится в альбомном или портретном режиме?)
- разрешение
Использование медиа запросов - популярный метод доставки индивидуального стиля страниц для настольных компьютеров, ноутбуков, планшетов и мобильных телефонов (например, iPhone и Android телефонов).
Поддержка
Числа в таблице указывают первую версию браузера, которая полностью поддерживает правило @media.
| Свойство | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Синтаксис медиа запросов
Медиа запрос носителя состоит из типа носителя и может содержать один или несколько выражения, которые разрешаются в true или false.
@media не|только тип носителя и (форма самовыражения) {
CSS-Код;
}
Результатом запроса является true, если указанный тип носителя совпадает с типом устройства документ отображается и все выражения в запросе media - true. Если медиа запрос имеет значение true, соответствующие таблицы стилей или правила стиля применяется в соответствии с обычными правилами каскада стилей.
Если не используются операторы not или only, тип носителя является необязательным и
all типы будут подразумеваться.
Вы также можете иметь различные таблицы стилей для различных носителей:
<link rel="stylesheet" media="mediatype and|not|only (expressions)"
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 MQ.
CSS3 Cправочник @media
Для полного обзора всех типов носителей и функций/выражений, пожалуйста, зайдите на Правило @media в CSS справонике.