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 правил.
