Чому медіа-запити потрібні в CSS

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

Чому потрібні медіа запити?

Медіа запити дозволяють створювати адаптивні та крос-пристроєві інтерфейси, які виглядають добре на:

Смартфонах
Планшетах
Ноутбуках
Моніторах з різними роздільними здатностями

Мета:

Зробити так, щоб сайт працював і виглядав однаково добре на різних екранах — від iPhone до 4K монітора.

Простий приклад

css

/* Базовий стиль */
.container {
  padding: 20px;
}

/* Застосовується, коли ширина екрану менша за 768px */
@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
}

Типові випадки використання

Адаптація шрифтів та відступів для різних екранів
Сховання або показ мобільного меню
Реструктуризація сіток та флекс-контейнерів
Зміна розмірів зображень або карток
Обробка темної/світлої теми через (prefers-color-scheme)

Типи медіа характеристик

Властивість	Що перевіряє
`width` / `height`	Розмір екрану/вікна перегляду
`max-width` / `min-width`	Максимальна або мінімальна ширина
`orientation`	Орієнтація екрану (`portrait`/`landscape`)
`resolution`	Щільність пікселів
`prefers-color-scheme`	Тема системи (`dark` / `light`)

Приклад адаптивної сітки

css

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

Таким чином, сітка реструктуризується для розміру екрану: 3 → 2 → 1 колонка.

Стратегія Mobile-First

Найчастіше стилі спочатку пишуться для мобільних пристроїв, а потім додаються медіа запити з min-width для ширших екранів:

css

.button {
  font-size: 14px;
}

@media (min-width: 768px) {
  .button {
    font-size: 16px;
  }
}

Підсумок

Медіа запити — ключ до адаптивної верстки
Дозволяють застосовувати різні стилі в залежності від пристрою, екрана та налаштувань користувача
Допомагають покращити зручність використання та зовнішній вигляд сайту на всіх пристроях

Висновок:

Якщо ви створюєте сайт для користувачів, які отримуватимуть доступ з різних пристроїв — media queries є обов'язковими.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Чому медіа-запити потрібні в CSS

#Чому потрібні медіа запити?

#Простий приклад

#Типові випадки використання

#Типи медіа характеристик

#Приклад адаптивної сітки

#Стратегія Mobile-First

#Підсумок