CSS Media Queries
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 (expressions) {
CSS-Code;
}
Результат запроса имеет значение true, если указанный тип носителя совпадает с типом устройства, на котором отображается документ, и все выражения в запросе мультимедиа являются истинными. Если запрос мультимедиа имеет значение true, применяется соответствующая таблица стилей или правила стиля, следуя обычным каскадным правилам.
Если вы не используете операторы Not или only, тип носителя является необязательным и
all тип будет подразумеваемым.
Вы также можете иметь различные таблицы стилей для различных носителей:
<link rel="stylesheet" media="mediatype and|not|only (expressions)"
href="print.css">
Типы мультимедиа CSS3
| Значение | Описание |
|---|---|
| all | Используется для всех устройств типа носителя |
| Используется для принтеров | |
| screen | Используется для компьютерных экранов, планшетов, смарт-телефонов и т.д. |
| speech | Используется для скринреадерс, что "читает" страницы вслух |
Мультимедийные запросы простые примеры
Одним из способов использования Media-запросов является использование альтернативного раздела 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 @media ссылка
Для полного обзора всех типов носителей и функций/выражений, пожалуйста, посмотрите на @media правило в нашей ссылке CSS.