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

Модуль Медіазапитів CSS дає змогу перевіряти та робити запити щодо значень області перегляду та характеристик браузера чи пристрою, щоб умовно застосовувати стилі CSS на основі поточного користувацького середовища. Медіазапити використовуються в директиві CSS @media та інших контекстах та мовах, таких як HTML та JavaScript.

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

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

У CSS можна скористатися директивою @media, щоб умовно застосувати частину списку стилів на основі результату медіазапиту. Щоб умовно застосувати весь список стилів, краще скористатися директивою @import.

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

Довідка

Директиви

Дескриптори

[!NOTE] Медіазапити CSS рівня 5 додали п'ять дескрипторів @media, які ще не отримали реалізації: environment-blending, horizontal-viewport-segments, nav-controls, vertical-viewport-segments і video-color-gamut. [!NOTE] Медіазапити CSS рівня 4 зробили нерекомендованими три дескриптори @media: device-aspect-ratio, device-height і device-width.

Типи даних та оператори

Терміни глосарія

Посібники

Застосування медіазапитів

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

Навчання – Основи медіазапитів

Знайомить з медіазапитами та підходами до їхнього використання для створення чуйних дизайнів.

Перевірка медіазапитів

Описує, як використовувати медіазапити в коді JavaScript, щоб з'ясовувати стан пристрою, а також задавати слухачів, що сповіщають код, коли результати медіазапитів змінюються (наприклад, коли користувач обертає екран або змінює розмір вікна браузера).

Використання медіазапитів заради доступності

Дізнайтеся, як медіазапити можуть допомогти користувачам краще розуміти ваш вебсайт.

Друк

Поради та техніки, які допоможуть покращити виведення вебвмісту на принтер.

Чуйні зображення

Дізнайтеся, як використовувати медіазапити вкупі з sizes для реалізації чуйних зображень на вебсайтах.

Споріднені концепції

Специфікації

Специфікація
Невідома специфікація
Media Queries Level 4 (Media Queries 4)
Media Queries Level 5 (Media Queries 5)

Дивіться також

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.