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

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

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

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

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

Медіазапити в HTML

В HTML медіазапити можуть застосовуватися до різних елементів:

• В атрибуті media елемента <link> вони визначають засоби візуалізації, до яких повинен застосовуватися сполучений ресурс (зазвичай CSS).
• В атрибуті media елемента <source> вони визначають засоби візуалізації, до яких повинен застосовуватися вихідний код. (Це діє лише всередині елементів <picture>.)
• В атрибуті media елемента <style> вони визначають засоби візуалізації, до яких стиль повинен бути застосований.

Медіазапити в JavaScript

У JavaScript можна скористатися методом Window.matchMedia(), щоб перевірити вікно на відповідність медіазапитові. Також можна використати MediaQueryList.addListener(), щоб отримати сповіщення про зміну стану запиту. З такою функціональністю сайт або застосунок може реагувати на зміни в конфігурації, орієнтації чи стані пристрою.

Дізнатися більше про програмне використання медіазапитів можна на сторінці Перевірка медіазапитів.

Довідка

Директиви

• @import
• @media

Посібники

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

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

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

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

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

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

Друк

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

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

{{Specifications}}

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

• Контейнерні запити
• Використовуйте @supports, щоб застосовувати стилі, що залежать від браузерної підтримки різних технологій CSS.