Що таке container queries? Чим вони відрізняються від media queries?
Container queries - це механізм CSS, який дозволяє змінювати стилі залежно від розмірів самого контейнера, усередині якого перебуває елемент. За логікою вони працюють так само, як media queries, але орієнтуються не на viewport, а на батьківський блок.
Приклад container query
.card {
container-type: inline-size; /* вмикаємо вимірювання контейнера */
}
@container (max-width: 500px) {
.title {
font-size: 18px;
}
}Тут .title змінить розмір шрифту лише якщо ширина контейнера .card ≤ 500px, а не ширина вікна браузера.
Чим відрізняються від media queries
| Характеристика | Media Queries | Container Queries |
|---|---|---|
| На що реагують | На розміри viewport | На розміри контейнера |
| Де застосовуються | Глобальна адаптація всієї сторінки | Локальна адаптація компонента |
| Підхід | «сторінка → компоненти» | «компоненти → незалежна адаптація» |
| Проблема, яку вирішують | Перебудови під екрани | Універсальні, повторно використовувані компоненти |
Ключова ідея
- Media queries: адаптують макет «зовні», від екрана.
- Container queries: адаптують компоненти «зсередини», незалежно від оточення.
Підсумок: container queries - це наступний етап після media queries. Вони дозволяють створювати повністю повторно використовувані, незалежні й адаптивні компоненти, не прив'язані до ширини всього екрана.
Якщо потрібно - можу показати приклад реального UI, який ламався з media queries і вирішився з container queries.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.