media CSS значення

Правило @media дозволяє вказати тип носія, для якого буде застосовано вказаний стиль. В якості типів виступають різні пристрої, наприклад, принтер, КПК, монітор та ін. В таблиці перечислені деякі з них.

Наступні типи є коректними, але застарілими і не дають ніякого результату.

Після ключового слова @media йде один або кілька типів носія, перерахованих в табл.; якщо їх більше одного, то вони поділяються між собою комою. Після чого йдуть обов'язкові фігурні дужки, всередині яких йде звичайне опис стильових правил.

Команда @media застосовується в основному для формування одного стильового файлу, який розбитий на блоки по типу пристроїв. Іноді ж має сенс створити кілька різних CSS-файлів - один для друку, інший для відображення в браузері - і підключати їх до документа в міру необхідності. У подібному випадку слід скористатися тегом <link> з атрибутом media, значенням якого виступають ті ж типи, перераховані в табл.

Логічні оператори, що застосовуються в медіа-запитах:

and

Логічне І. Вказується для об'єднання декількох умов.

Приклад. Стиль для всіх кольорових пристроїв

@media all and (color) { ... }

not

Логічне НЕ. Вказується для заперечення умови.

Приклад. Стиль для всіх пристроїв крім принтера

@media all and (not print) { ... }

Оператор not оцінюється в запиті останнім, тому вираз

@media not all and (color) { ... }

слід розуміти як

@media not (all and (color)) { ... }

а не

@media (not all) and (color) { ... }

only

Застосовується для старих браузерів, які не підтримують медіа-запити. Старі браузери вважають ключове слово only типом носія, але оскільки такого типу не існує, то ігнорують весь стиль цілком. Сучасні браузери сприймають запис з only і без нього однаково.

@media only all and (not print) { ... }

Медіа-функції

Медіа-функції задають технічні характеристики пристрою, на якому відображається документ. Стиль виконується в тому випадку, якщо запит повертає істину, іншими словами, зазначені умови виконуються.

Більшість функцій містять приставку min- і max-, які відповідають мінімальному і максимальному значенню. Так, max-width: 400px означає, що ширина вікна браузера менше 400 пікселів, а min-width: 1000px, навпаки, повідомляє, що ширина вікна понад 1000 пікселів.

aspect-ratio (min-aspect-ratio, max-aspect-ratio) - Визначає співвідношення ширини і висоти відображуючої області пристрою. Значення вказується в вигляді двох цілих чисел поділюваних між собою слешем (/).

color (min-color, max-color) - Визначає число біт на канал кольору. Наприклад, значення 3 означає, що червоний, зелений і синій канал можуть відображати 23 кольорів кожен, що в загальному становить 512 кольорів (8 × 8 × 8). Якщо значення не вказано, тоді перевіряється що пристрій кольоровий. У прикладі показано така перевірка.

@media screen and (color) { /* Для кольорових екранів */
  body { background: #fc0; }
}
@media screen and (min-color:3) { /*Мінімум 512 кольорів */
  body { background: #ccc; }
}

color-index (min-color-index, max-color-index) - Визначає кількість кольорів, що підтримує пристрій.

device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio) - Визначає співвідношення сторін екрану пристрою. Значення вказується в вигляді двох цілих чисел поділюваних між собою слешем (/). У прикладі показано, як встановити стиль для екранів із співвідношенням сторін 16: 9 і більше.

@media screen and (min-device-aspect-ratio: 16/9) {
 ...
}

device-height (min-device-height, max-device-height) - Визначає всю доступну висоту екрану пристрою або друкованої сторінки.

device-width (min-device-width, max-device-width) - Визначає всю доступну ширину екрану пристрою або друкованої сторінки.

правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	3	9.2	12	6

Підтримка: мобільні переглядачі

Переглядач
	2	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box">Звузь область перегляду до 500px — я почервонію.</div>

.box {
    padding: 12px;
    background: #0172ad;
    color: #fff;
}

@media screen and (max-width: 500px) {
    .box {
        background: #d81b60;
    }
}