Медіа-запити огляд різних можливостей
Ось простий приклад:
В результаті застосування даного медіа-запиту текст абзацу буде ставати червоним, якщо ширина екрана буде дорівнює 700px і менше. Якщо ви хочете, щоб текст ставав червоним, якщо ширина екрана буде більше 700px, тоді потрібно буде використовувати, навпаки, «min-width». Ви також можете створити два окремих запиту, використовуючи «max-width» і «min-width». Ось як це буде виглядати:
Прекрасно! Тепер текст буде ставати червоним тільки за умови, що ширина екрану буде перебувати в діапазоні між 500px і 700px (включно).
А що якщо ви хочете застосувати якісь стилі, якщо ширина екрана буде менше 500px або більше 700px? Ви можете це зробити, розділивши запити коми ось так:
Зверніть увагу, що в демо-прикладі текст не стає червоним, якщо ширина вікна знаходиться в діапазоні між 500px і 700px (НЕ включно). Медіа-запити також можна вказувати різними способами. Прямо в HTML-документі:
Додатково до цього, можна використовувати правило @import в CSS-файлі:
Поки що все досить легко, і вам могла бути вже знайома більша частина (якщо ні все) з того, про що говорилося вище. Але давайте підемо трохи далі.
У більшості випадків медіа-запити використовуються для зміни оформлення в залежності від ширини екрану. І хоча зміна ширини є найбільш поширеним випадком їх застосування, існують і інші різновиди запитів, що впливають на різні параметри.
Ширина і висота
Ми можемо використовувати параметр висоти точно також як і параметр ширини в попередніх прикладах. Наприклад, використовуючи вищенаведений метод, ми можемо зробити колір фону жовтим, якщо висота вікна браузера буде 600px або менше:
орієнтація
Параметр орієнтації пристрою може використовуватися для особливої прихильності елементів. Це може стати в нагоді при розміщенні елементів меню і кнопок там, де користувачеві буде зручно натиснути на них великими пальцями рук. Наприклад, щоб застосувати окремі стилі для альбомного режиму відображення, ми можемо прописати наступне:
В даному прикладі до елементу menu застосовується властивість float: left, якщо у пристрої буде активним альбомного формату. Теж саме можна прописати і для портретного режиму:
Щоб дізнатися більше про використання параметра orientation, прочитайте цю статтю.
Існує багато різних способів для використання параметра кольору. Перший спосіб - це перевірити чи підтримує пристрій різні кольори, використовуючи для цього медіа-функцію (color). Якщо ми хочемо задати стилі тільки для чорно-білих пристроїв, ми можемо прописати приблизно наступне:
В даному прикладі наведено ключове слово not, яке може використовуватися з усіма іншими варіантами запитів. Вищенаведений код може стати в нагоді для того, щоб полегшити читання тексту на чорно-білих пристроях.
Наступний спосіб використання параметра кольору полягає у визначенні пристроїв з мінімальним (максимальним) числом біт на канал кольору. Припустимо, що ми хочемо прибрати фонове зображення, якщо пристрій підтримує 4-бітний колір або ще менше. Тоді медіа-запит буде виглядати так:
Ми також можемо застосовувати стилі в залежності від того, використовуються чи ні пристроєм індексовані кольори. Щоб застосувати стилі для такого пристрою, потрібно прописати наступне:
В даному прикладі ми використовуємо ключове слово all, щоб вибрати всі пристрої, що у випадку з медіа-запитами є вибором за замовчуванням.
Давайте припустимо, що ви хочете показати попередження, якщо кількість індексованих кольорів на пристрої користувача менше 256. Тоді можна прописати наступне:
одноцветность
Цей параметр застосовується для монохромних пристроїв. Щоб задати певні стилі для всіх пристроїв такого типу, ми можемо використовувати медіа-функцію (monochrome). Ми також можемо використовувати дане значення, щоб задати стилі для пристроїв з певній колірній роздільною здатністю, яка вимірюється кількістю біт на піксель. Наприклад, якщо ви не хочете показувати зображення на пристроях з роздільною здатністю 8 біт на піксель, використовуйте наступний код:
Ще одна класна річ, яку ви можете реалізувати за допомогою значення monochrome, - це задати різні стилі для кольорової і чорно-білого друку. Для цього необхідно додати значення print до або після значення monochrome. Ось як це може виглядати в CSS-файлі:
Є два способи використання параметр пропорцій. Ви можете використовувати пропорції вікна браузера (за допомогою aspect-ratio) або пропорції екрану самого пристрою (за допомогою device-aspect-ratio).
У наступному прикладі колір фону стає жовтим, якщо вікно браузера буде квадратним або буде активований отримати альбомний формат зображення:
А що якщо ви захочете заховати якийсь контент від широкоформатних моніторів? Тоді ви можете спробувати наступне:
У цьому прикладі, абзаци не показуються, якщо дисплей має пропорції 16: 9 або 16:10.
В даному прикладі зображення не будуть відображатися, якщо пристрій користувача використовує фіксований розмір пікселів:
Тут є один момент, про який слід пам'ятати, - це одиниця виміру «em». Коли створюються дисплеї для пристроїв, що використовують фіксований розмір пікселів, одиниця виміру «em» змінює своє значення. Замість звичного для нас значення воно буде позначати конкретний розмір однієї комірки сітки.
Дозвіл
Медіа-функція resolution може бути використана для визначення стилів для пристроїв виведення з певним значенням dpi (точки на CSS «дюйм») або dpcm (точки на CSS «сантиметр»). Наприклад, якби вам захотілося призначити інший шрифт для екрану з роздільною здатністю менше 150dpi, тоді ваш код виглядав би так:
Єдине, на що слід звернути увагу при використанні медіа-функції resolution, - це друк. Для принтерів значення dpi і dpcm відносяться до їх роздільної здатності при друку.
Параметр scan відноситься до процесу розгортки, яку використовує ТВ-пристрій. Як значення можна вказати progressive або interlace. Запит виглядає наступним чином:
Але даний метод працює тільки для ТВ-пристроїв.
Медіа-типи
Під медіа-типами маються на увазі різні типи дисплеїв, для яких можуть застосовуватися окремі стилі. Ось список наявних на даний момент типів:
braille - Для пристроїв системи Брайля для сліпих людей. (Приклад 1 | Приклад 2)
embossed - Для ідеї майбутнього, відомої як опуклі екрани. (Патент | Експериментування)
print - Для принтерів.
projection - Для дрібно- і великомасштабних проекторів.
screen - Найбільш поширений тип. Для всіх пристроїв, що мають екрани.
speech - Для пристроїв, що відтворюють мова. (Приклад)
tty - Для телекомунікаційних пристроїв для глухих. (Приклад)
tv - Для телевізорів.
Ходили також чутки про те, що медіа-тип 3d-glasses стане дійсним, хоча він до цих пір не визначено ні в одній з специфікацій W3C. Однак він згаданий в цій специфікації W3C. І якщо все-таки медіа-тип 3d-glasses буде визначено, то його можна буде також використовувати в HTML4, оскільки медіа-типи мають зворотну сумісність.
Для подальшого читання
Ось кілька посилань на ресурси по даній темі:
висновок
Редакція: Команда webformyself.
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
