Медиа-запросы CSS
CSS2 представил типы мультимедиа
Правило @media, введенное в CSS2, позволило определить разные правила стиля для разных типов медиа.
Примеры. У вас может быть один набор правил стиля для экранов компьютеров, один для принтеров, один для портативных устройств, один для телевизионных устройств и т. д.
К сожалению, эти типы носителей никогда не получали широкой поддержки устройствами, кроме типа носителя для печати.
CSS3 представил медиа-запросы
Медиа-запросы в CSS3 расширили идею типов мультимедиа CSS2: вместо того, чтобы искать тип устройства, они смотрят на возможности устройства.
Медиа-запросы можно использовать для проверки многих вещей, таких как:
- ширина и высота области просмотра
- ширина и высота устройства
- ориентация (планшет/телефон в ландшафтном или портретном режиме?)
- разрешающая способность
Использование медиа-запросов является популярным методом доставки настроенной таблицы стилей на настольные компьютеры, ноутбуки, планшеты и мобильные телефоны (такие как телефоны iPhone и Android).
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, полностью поддерживающую @mediaправило.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Синтаксис медиазапроса
Медиа-запрос состоит из типа мультимедиа и может содержать одно или несколько выражений, которые разрешаются либо как истина, либо как ложь.
@media not|only mediatype and (expressions) {
CSS-Code;
}
Результат запроса является истинным, если указанный тип мультимедиа соответствует типу устройства, на котором отображается документ, и все выражения в мультимедийном запросе истинны. Когда медиа-запрос имеет значение true, применяются соответствующие таблицы стилей или правила стилей в соответствии с обычными каскадными правилами.
Если вы не используете операторы not или only, тип носителя является необязательным, и
allтип будет подразумеваться.
У вас также могут быть разные таблицы стилей для разных носителей:
<link rel="stylesheet" media="mediatype and|not|only (expressions)"
href="print.css">
Типы носителей CSS3
| Value | Description |
|---|---|
| all | Used for all media type devices |
| Used for printers | |
| screen | Used for computer screens, tablets, smart-phones etc. |
| speech | Used for screenreaders that "reads" the page out loud |
Простые примеры медиазапросов
Один из способов использования медиа-запросов — создать альтернативный раздел 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 .
Справочник по CSS @media
Полный обзор всех типов мультимедиа и функций/выражений см. в правиле @media в нашем справочнике по CSS .