Медіазапити CSS
Модуль Медіазапитів CSS дає змогу перевіряти та робити запити щодо значень області перегляду та характеристик браузера чи пристрою, щоб умовно застосовувати стилі CSS на основі поточного користувацького середовища. Медіазапити використовуються в директиві CSS @media
та інших контекстах та мовах, таких як HTML та JavaScript.
Медіазапити – це ключова компонента чуйного дизайну. Вони дають змогу умовно задавати стилі CSS, залежно від присутності чи значень характеристик пристрою. Поширено використання медіазапитів на основі розміру області перегляду, щоб задавати відповідні макети на пристроях з різними розмірами екранів – наприклад, три колонки на широкому екрані чи одна колонка на вузькому.
Серед інших поширених прикладів – збільшення розміру шрифту та приховування навігаційних меню при друку сторінки, припасування внутрішніх відступів між абзацами, коли сторінку переглядають у портретному чи ландшафтному режимі, або збільшення розміру кнопок, щоб забезпечити більшу площу для натискання на сенсорних екранах.
У CSS можна скористатися директивою @media
, щоб умовно застосувати частину списку стилів на основі результату медіазапиту. Щоб умовно застосувати весь список стилів, краще скористатися директивою @import
.
При розробці компонентів HTML для багаторазового використання також можна скористатися контейнерними запитами, які дають змогу застосовувати стилі на основі розміру контейнерного елемента, а не області перегляду чи інших характеристик пристрою.
Довідка
Директиви
Дескриптори
any-hover
any-pointer
aspect-ratio
color
color-gamut
color-index
device-aspect-ratio
device-height
device-width
display-mode
dynamic-range
forced-colors
grid
height
hover
inverted-colors
monochrome
orientation
overflow-block
overflow-inline
pointer
prefers-color-scheme
prefers-contrast
prefers-reduced-data
prefers-reduced-motion
prefers-reduced-transparency
resolution
scan
scripting
update
video-dynamic-range
width
Примітка: Медіазапити CSS рівня 5 додали п'ять дескрипторів
@media
, які ще не отримали реалізації:environment-blending
,horizontal-viewport-segments
,nav-controls
,vertical-viewport-segments
іvideo-color-gamut
. Примітка: Медіазапити CSS рівня 4 зробили нерекомендованими три дескриптори@media
:device-aspect-ratio
,device-height
іdevice-width
.
Типи даних та оператори
Терміни глосарія
Посібники
- Застосування медіазапитів
Знайомить з медіазапитами, їхнім синтаксисом, а також операторами та медійними можливостями, які використовуються для створення виразів медіазапитів.
- Посібник початківця з медіазапитів
Знайомить з медіазапитами та підходами до їхнього використання для створення чуйних дизайнів.
- Перевірка медіазапитів
Описує, як використовувати медіазапити в коді JavaScript, щоб з'ясовувати стан пристрою, а також задавати слухачів, що сповіщають код, коли результати медіазапитів змінюються (наприклад, коли користувач обертає екран або змінює розмір вікна браузера).
- Використання медіазапитів заради доступності
Дізнайтеся, як медіазапити можуть допомогти користувачам краще розуміти ваш вебсайт.
- Друк
Поради та техніки, які допоможуть покращити виведення вебвмісту на принтер.
- Вивчення – чуйні зображення
Дізнайтеся, як використовувати медіазапити вкупі з
sizes
для реалізації чуйних зображень на вебсайтах.
Споріднені концепції
- Модуль Утримання CSS
- Модуль Умовні правила CSS
- Директива
@supports
- Застосування запитів можливостей
- Директива
- Модуль Сторінкових медій CSS module
- Директива
@page
- Директива
- Модуль Об'єктна модель CSS
- Інтерфейс
MediaQueryList
- Інтерфейс
MediaList
- Властивість
mediaText
- Властивість
- Об'єкт
MediaQueryListEvent
- Інтерфейс
- HTML
- Атрибут SVG
media
Специфікації
Специфікація |
---|
Невідома специфікація |
Media Queries Level 4 (Media Queries 4) |
Media Queries Level 5 (Media Queries 5) |
Дивіться також
- Контейнерні запити
- Використання атрибутів
srcset
іsizes
- Сторінкові медії CSS
- Використовуйте
@supports
, щоб застосовувати стилі, що залежать від браузерної підтримки різних технологій CSS.