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
• Приклад 2

@media screen and (min-device-width: 1600px) {


    div {width: 1500px;}


}