Медіазапити CSS
Медіазапити CSS – це ключова компонента чуйного дизайну, який дає змогу застосовувати стилі CSS в залежності від наявності або значень характеристик пристрою.
Заведено застосовувати медіазапит на основі розміру області перегляду, щоб можна було приймати рішення щодо компонування для пристроїв з різними розмірами екранів. Наприклад, може бути менший розмір шрифту для менших екранів, збільшити внутрішній відступ між абзацами, коли сторінка переглядається в портретному режимі, або збільшити розмір кнопок на сенсорних екранах.
У CSS можна використати директиву @media
, щоб умовно застосувати частину списку стилів на основі результату медіазапиту.
Щоб умовно застосувати цілий список стилів, слід використати @import
.
При розробці компонентів HTML для багаторазового використання також можна скористатися контейнерними запитами, які дають змогу застосовувати стилі на основі розміру контейнерного елемента, а не області перегляду чи інших характеристик пристрою.
Медіазапити в HTML
В HTML медіазапити можуть застосовуватися до різних елементів:
- В атрибуті
media
елемента<link>
вони визначають засоби візуалізації, до яких повинен застосовуватися сполучений ресурс (зазвичай CSS). - В атрибуті
media
елемента<source>
вони визначають засоби візуалізації, до яких повинен застосовуватися вихідний код. (Це діє лише всередині елементів<picture>
.) - В атрибуті
media
елемента<style>
вони визначають засоби візуалізації, до яких стиль повинен бути застосований.
Медіазапити в JavaScript
У JavaScript можна скористатися методом Window.matchMedia()
, щоб перевірити вікно на відповідність медіазапитові.
Також можна використати MediaQueryList.addListener()
, щоб отримати сповіщення про зміну стану запиту.
З такою функціональністю сайт або застосунок може реагувати на зміни в конфігурації, орієнтації чи стані пристрою.
Дізнатися більше про програмне використання медіазапитів можна на сторінці Перевірка медіазапитів.
Довідка
Директиви
Посібники
- Застосування медіазапитів
Знайомить з медіазапитом, їхнім синтаксисом, а також операторами та можливостями медіа, що використовуються для конструювання виразів медіазапитів.
- Перевірка медіазапитів програмно
Описує, як використовувати медіазапити в коді JavaScript, щоб з'ясовувати стан пристрою, а також задавати слухачів, що сповіщають код, коли результати медіазапитів змінюються (наприклад, коли користувач обертає екран або змінює розмір вікна браузера).
- Використання медіазапитів заради доступності
Дізнайтеся, як Медіазапити можуть допомогти розуміти ваш вебсайт краще.
- Друк
Поради та техніки, які допоможуть покращити виведення вебвмісту на принтер.
Специфікації
{{Specifications}}
Дивіться також
- Контейнерні запити
- Використовуйте
@supports
, щоб застосовувати стилі, що залежать від браузерної підтримки різних технологій CSS.