Медіа-запитів: Огляд різних можливостей

18

Від автора: Якщо вам доводилося працювати над створенням чуйного дизайну, то, напевно, ви використовували медіа-запити. Медіа-запити – це зрозумілий і простий спосіб для створення чуйних сайтів за допомогою CSS. Вони дозволяють вам змінювати оформлення сторінки при певному розмірі екрану користувача.

Ось простий приклад:

@media (max-width: 700px) {
p {
color: red;
}
}

Демо-приклад

В результаті застосування даного медіа-запиту текст абзацу буде ставати червоним, якщо ширина екрана буде дорівнює 700px і менше. Якщо ви хочете, щоб текст ставав червоним, якщо ширина екрана буде більше 700px, тоді потрібно буде використовувати, навпаки, «min-width». Ви також можете створити два окремих запиту, використовуючи «max-width» і «min-width». Ось як це буде виглядати:

@media (max-width: 700px) and (min-width: 500px) {
p {
color: red;
}
}

Демо-приклад

Чудово! Тепер текст буде ставати червоним тільки за умови, що ширина екрана буде перебувати в діапазоні між 500px і 700px (включно).

А що якщо ви хочете застосувати які-небудь стилі, якщо ширина екрана буде менше 500px або більше 700px? Ви можете це зробити, поділивши запити коми ось так:

@media (max-width: 500px), min-width: 700px) {
p {
color: red;
}
}

Демо-приклад

Зверніть увагу, що в демо-прикладі текст не стає червоним, якщо ширина вікна знаходиться в діапазоні між 500px і 700px (не включно). Медіа-запити також можна вказувати різними способами. Прямо в HTML-документі:

Додатково до цього, можна використовувати правило @import в CSS-файлі:

/* @import */
@import url(example.css) (max-width: 700px);
/* @media */
@media (max-width: 700px) {
/* Тут прописується CSS-правила */
}

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

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

Ширина і висота

Ми можемо використовувати параметр висоти точно також як і параметр ширини в попередніх прикладах. Наприклад, використовуючи вищенаведений метод, ми можемо зробити колір фону жовтим, якщо висота вікна браузера буде 600px або менше:

@media (max-height: 600px) {
body {
background: yellow;
}
}

Демо-приклад

Ми також можемо додати префікс device — для зміни параметрів ширини і висоти. Якщо ми так зробимо, то значення буде враховуватися вся ширина або висота екрану самого пристрою, замість ширини та висоти вікна браузера вікна:

@media (max-device-height: 600px) {
body {
background: red;
}
}

Орієнтація

Медіа-запитів: Огляд різних можливостей

Параметр орієнтації пристрою може використовуватися для особливого розташування елементів. Це може стати в нагоді при розміщенні елементів меню і кнопок там, де вам буде зручно натиснути на них великими пальцями рук. Наприклад, щоб застосувати окремі стилі для альбомного режиму відображення, ми можемо прописати наступне:

@media screen and (orientation: landscape) {
menu {
float: left;
}
}

У даному прикладі елементу menu застосовується властивість float: left, якщо у пристрої буде активним альбомний режим. Теж саме можна прописати і для портретного режиму:

@media screen and (orientation: portrait) {
menu {
float: right;
}
}

Щоб дізнатися більше про використання параметра orientation, прочитайте цю статтю.

Колір

Існує багато різних способів для використання параметра кольору. Перший спосіб – це перевірити підтримує пристрій різні кольори, використовуючи для цього медіа-функцію (color). Якщо ми хочемо задати стилі тільки для чорно-білих пристроїв, ми можемо прописати приблизно наступне:

@media not (color) {
body {
background: black;
color: white;
}
}

У цьому прикладі наведено ключове слово not, яке може використовуватися зі всіма іншими варіантами запитів. Вищенаведений код може знадобитися для того, щоб полегшити читання тексту на чорно-білих пристроях.

Наступний спосіб використання параметра кольору полягає у визначенні пристроїв з мінімальним (максимальним) числом біт на канал кольору. Припустимо, що ми хочемо прибрати фонове зображення, якщо пристрій підтримує 4-бітовий колір або ще менше. Тоді медіа-запит буде виглядати так:

@media (max-color: 4) {
body {
background-image: none;
}
}

Ми також можемо застосовувати стилі в залежності від того, використовуються чи ні пристроєм індексовані кольори. Щоб застосувати стилі для такого пристрою, потрібно прописати наступне:

@all media and (color-index) {
body {
background-image: url(wood-texture.jpg);
}
}

У даному прикладі ми використовуємо ключове слово all, щоб вибрати всі пристрої, що у випадку з медіа-запитів є типовою.

Давайте припустимо, що ви хочете показати попередження, якщо кількість індексованих кольорів на пристрої користувача менше 256. Тоді можна прописати наступне:

@media (max-color-index: 255) {
.alert {
display: block;
}
}

Однобарвність

Цей параметр застосовується для монохромних пристроїв. Щоб задати певні стилі для всіх пристроїв такого типу, ми можемо використовувати медіа-функцію (monochrome). Ми також можемо використовувати це значення, щоб визначити стилі для пристроїв з певної колірної роздільною здатністю, яка вимірюється кількістю бітів на піксель. Наприклад, якщо ви не хочете показувати зображення на пристроях з роздільною здатністю 8 біт на піксель, використовуйте наступний код:

@media (max-monochrome: 8) {
img {
display: none;
}
}

Ще одна класна річ, яку ви можете реалізувати з допомогою значення monochrome, – це вказати різні стилі для кольорової і чорно-білого друку. Для цього необхідно додати значення print до або після значення monochrome. Ось як це може виглядати в CSS-файлі:

/* Чорно-білий друк */
@media (monochrome) and print {
body {
color: black;
}
}
/* Друк */
@media not (monochrome) and print {
body {
color: #09f;
}
}

Пропорції

Пропорції екранів пристроїв у сильно змінилися з моменту появи смартфонів і планшетів. На старих моніторах звичним співвідношенням сторін екрана було значення 4:3 і 5:3, але тепер завдяки новим стандартам HD-відео, з’явилися дисплеї з пропорціями 16:9 і 16:10.

Є два способи використовувати параметр пропорцій. Ви можете використовувати пропорції вікна браузера (з допомогою aspect-ratio) або пропорції екрану самого пристрою (device-aspect-ratio).

У наступному прикладі колір фону стає жовтим, якщо вікно браузера буде квадратним або буде активований альбомний режим відображення:

@media (min-aspect-ratio: 1/1) {
body {
background: yellow;
}
}

Демо-приклад

А що якщо ви захочете заховати якийсь контент від широкоформатних моніторів? Тоді ви можете спробувати наступне:

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) {
p {
display: none;
}
}

Демо-приклад

У цьому прикладі, абзаци не будуть відображатися, якщо дисплей має пропорції 16:9 або 16:10.

Сітка

Медіа-функція grid належить до пристроїв на зразок терміналів. Це може бути термінальне додаток, як показано на картинці, або дисплей застарілого телефону, який використовує для відображення інформації один єдиний шрифт.

Медіа-запитів: Огляд різних можливостей

В даному прикладі зображення не будуть відображатися, якщо пристрій користувача використовує фіксований розмір пікселів:

@media (grid) {
img {
display: none;
}
}

Тут є один момент, про який слід пам’ятати, – це одиниця виміру «em». Коли створюються дисплеї для пристроїв, що використовують фіксований розмір пікселів, одиниця виміру «em» змінює своє значення. Замість звичного для нас значення воно буде позначати конкретний розмір однієї чарунки сітки.

Дозвіл

Медіа-функція resolution може бути використана для визначення стилів для пристроїв висновку з певним значенням dpi (крапки на CSS «дюйм») або dpcm (точки на CSS «сантиметр»). Наприклад, якщо б вам захотілося призначити інший шрифт для екрану з роздільною здатністю менше 150dpi, тоді ваш код виглядав би так:

@media (max-resolution: 150dpi) {
body {
font-family: ‘comic sans’, cursive;
}
}

Єдине, на що слід звернути увагу при використанні медіа-функції resolution, – це друк. Для принтерів значення dpi і dpcm відносяться до їх роздільної здатності при друку.

Розгортка

Параметр scan відноситься до процесу розгортки, яку використовує ТВ-пристрій. Як значення можна вказати progressive або interlace. Запит виглядає наступним чином:

@media tv and (scan: interlace) {
video {
display: none;
}
}

Але даний метод працює тільки для ТБ-пристроїв.

Медіа-типи

Під медіа-типами маються на увазі різні типи дисплеїв, для яких можуть застосовуватися окремі стилі. Ось список наявних на даний момент типів:

braille – Для пристроїв системи Брайля для сліпих людей. (Приклад 1 | Приклад 2)

embossed – Для ідеї майбутнього, відомої як опуклі екрани. (Патент | Експериментування)

handheld – Для телефонів, кишенькових комп’ютерів і інших невеликих пристроїв.

print – Для принтерів.

projection – Для дрібно — і великомасштабних проекторів.

screen – Найбільш поширений тип. Для всіх пристроїв, які мають екрани.

speech – Для пристроїв, що відтворюють мова. (Приклад)

tty – Для телекомунікаційних пристроїв для глухих. (Приклад)

tv – Для телевізорів.

Ходили також чутки про те, що медіа-тип 3d glasses стане валідним, хоча він до цих пір не визначено ні в одній специфікації W3C. Однак він згаданий у цій специфікації W3C. І якщо все-таки медіа-тип 3d glasses буде визначено, то його можна буде також використовувати в HTML4, оскільки медіа-типи мають зворотну сумісність.

Для подальшого читання

Ось кілька посилань на ресурси по даній темі:

Медіа-запити для новачків стаття на сайті SitePoint

Медіа-запити рівень 3 специфікація на сайті W3C

Медіа-запити рівень 4 специфікація на сайті W3C

Висновок

Ось і підійшов до кінця огляд більшості різних способів визначення конкретних пристроїв, вікон та багато іншого. Якщо вам довелося використовувати якісь з цих медіа-запитів або медіа-функцій, ми були б раді, якби ви поділилися своїми враженнями в коментарях.