Медіа-запити

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0 +	1.0 +	10.0 +	4.0 +	3.6 +	2.0 +	2.0 +

Коротка інформація

Значення за умовчанням	all
Посилання на специфікацію	http://www.w3.org/TR/css3-mediaqueries/#syntax

Версії CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Опис

Поряд з типами носіїв в CSS3 включена підтримка різних технічних параметрів пристроїв, на основі яких потрібно завантажувати ті чи інші стилі. Наприклад, можна визначити смартфон з максимальною роздільною здатністю 640 пікселів і для нього встановити одні стильові властивості, а для інших пристроїв інші. Також можна виявити різні характеристики на кшталт наявності монохромного екрану, орієнтації (портретна або альбомна) і ін. Всі характеристики легко комбінуються, тому допустимо поставити стиль тільки для пристроїв альбомного формату з заданим дозволом екрану.

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

Синтаксис

Все запити починаються з правила @media, після чого варто умова, в якому використовуються типи носіїв, логічні оператори і медіа -функції. Типи носіїв перераховані в табл. 1.

Табл. 1. Типи носіїв і їх опис

Тип	Опис
all	Всі типи . Це значення використовується за умовчанням.
braille	Пристрої, засновані на системі Брайля, які призначені для читання сліпими людьми.
embossed	Принтери, що використовують для друку систему Брайля.
handheld	Смартфони і аналогічні їм апарати.
print	Принтери і інші друкарські пристрої.
projection	проектори.
screen	Екран монітора.
speech	Мовні синтезатори, а також програми для відтворення тексту вголос. Сюди, наприклад, можна віднести мовні браузери.
tty	Пристрої з фіксованим розміром символів (телетайпи, термінали, пристрої з обмеженнями дисплея).
tv	Телевізори.

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

and

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

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

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

not

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

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

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

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

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

варто розуміти як

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

а не

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

only

Застосовується для старих браузерів, які не підтримують медіа-запити.

Приклад. Стиль для нових браузерів

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

У списку немає логічного оператора АБО, його роль виконує кома. Перерахування кількох умов через кому говорить про те, що якщо хоча б одна умова виконується, то стиль буде застосований.

Приклад. Стиль для пристроїв з альбомної орієнтацією або мінімальною шириною 480 пікселів.

 @media all and (orientation: landscape), all and (min-width: 480px) { ...} 

Також при використанні операторів варто вказувати дужки, щоб міняти пріоритет операцій.

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

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

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

aspect-ratio (min-aspect-ratio, max-aspect-ratio)

Тип носія: handheld, print, projection, screen, tty, tv значення: ціле число /ціле число

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

color (min-color, max-color)

Тип носія: handheld, print, projection, screen, tty, tv Значення: ціле число

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

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

 @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)

Тип носія: handheld, print, projection, screen, tty, tv значення: ціле число

Визначає кількість кольорів, яке підтримує пристрій. У прикладі 2 показаний стиль для екранів відображають не менш 256 кольорів.

Приклад 2. Кольоровий дисплей

 @media all and (min-color-index: 256) {...} 

device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)

Тип носія: handheld, print, projection, screen, tty, tv значення: ціле число /ціле число

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

Приклад 3. «Кіношне» співвідношення

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

device-height (min-device-height, max -device-height)

Тип носія: все крім speech значення: розмір

Визначає всю доступну висоту екрану пристрою або друкованої сторінки.

device-width (min-device-width, max-device-width)

Тип носія: все крім speech Значення: размер

Визначає всю доступну ширину екрану пристрою або друкованої сторінки. У прикладі 4 в залежності від дозволу монітора встановлюється ширина шару. Так, для значення 1280 пікселів ширина макета задається як 1100px.

Приклад 4. Ширина макета

HTML5 CSS3 IE Cr Op Sa Fx

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>
 Ширина макета </title>
 <style>
 div {padding: 10px; background: #e8bfad; margin: auto; } @Media screen and (min-device-width: 1600px) {div {width: 1500px;}} @media screen and (device-width: 1280px) {div {width: 1100px;}} @media screen and (device- width: 1024px) {div {width: 980px;}} </style>
 </head>
 <body>
 <div>
 Діабаз, формуючи аномальні геохімічні ряди, змінює вапняк, утворюючи на межі з Західно-Карельським підняттям своєрідну систему грабенів. </div>
 </body>
 </html>
 

grid

Тип носія: all Значення: немає

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

Якщо вам потрібно форматувати текст, не вказуйте його розмір у пікселах, для подібних пристроїв використовується одиниця em (приклад 5).

Приклад 5. Розмір літер

HTML5 CSS3 IE Cr Op Sa Fx

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>
 Стиль для бабушкофон </title>
 <style>
 @media handheld and (grid) and (max-width: 15em) {body {font-size: 2em; }} </style>
 </head>
 <body>
 <p>
 Привіт! Як справи? Як сажа біла? </p>
 </body>
 </html>
 

height (min-height, max-height)

Тип носія: все крім speech значення: розмір

Висота відображається області.

monochrome (min-monochrome, max-monochrome)

Тип носія: handheld, print, projection, screen, tty, tv Значення: ціле число

Визначає, що пристрій монохромне. Якщо вказано число, то воно означає число біт на піксель. Так, значення 8 рівнозначно 256 відтінкам сірого (або іншого кольору). У прикладі 6 показаний стиль для монохромного і кольорового принтера.

Приклад 6. Стиль для принтера

 @media print and (monochrome) {body {font-family: Times, 'Times New Roman', serif; } 
 h1, h2, p {color: black; }} @media print and (color) {body {font-family: Arial, Verdana, sans-serif; } 
 h1, h2, p {color: #556b2f; }} 

orientation

Тип носія: handheld, print, projection, screen, tty, tv Значення: landscape | portrait

Визначає, що пристрій знаходиться в горизонтальному режимі (ширина більше висоти) або портретному (ширина менше висоти).

У прикладі 7 встановлюється різна фонова картинка в разі альбомної (landscape) або портретної орієнтації (portrait).

Приклад 7. Використання орієнтації пристрою

 @media screen and (orientation: landscape) {#logo {background: url (logo1.png) no-repeat; }} @media screen and (orientation: portrait) {#logo {background: url (logo2.png) no-repeat; }} 

resolution (min-resolution, max-resolution)

Тип носія: handheld, print, projection, screen, tv значення: дозвіл в dpi (точок на дюйм) або dpcm (точок на сантиметр)

Визначає дозвіл пристрою, наприклад, принтера. У прикладі 8 стиль буде працювати для принтера з мінімальним дозволом 300 точок на дюйм.

Приклад 8. Дозвіл принтера

 @media print and (min-resolution: 300dpi) {...} 

scan

Тип носія: tv значення: interlace | progressive

Визначає тип розгортки телевізора — череcстрочная (interlace) або прогресивна (progressive). При чергуванням розгортці телевізор спочатку показує непарні рядки кадру, потім парні, що дозволяє скоротити передані дані. У прогресивної розгортці кадр передається і показується цілком.

width (min-width, max-width)

Тип носія: все крім speech Значення: розмір

Описує ширину відображається області. Це може бути вікно браузера або друкована сторінка. У прикладі 9 при зменшенні вікна до 600 пікселів і менше змінюється колір фону веб-сторінки.

Приклад 9. Використання max-width

HTML5 CSS3 IE Cr Op Sa Fx

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>
 Ширина сторінки </title>
 <style>
 body {background: #f0f0f0; } @Media screen and (max-width: 600px) {body {background: #fc0; }} </style>
 </head>
 <body>
 <p>
 Поки магма залишається в камері, мусковіт сінгонально піднімає шток, в той час як значення максимумів змінюються в широких межах. </p>
 </body>
 </html>