Що таке media query? Для чого вони використовуються?

CSSJunior~1 хв читання

Media query - це умова в CSS, яка дозволяє застосовувати різні стилі залежно від характеристик пристрою (ширина екрана, орієнтація, роздільна здатність тощо).

Використовуються для:

Адаптивного дизайну (змінювати верстку під мобільні пристрої, планшети, десктопи)
Таргетування окремих пристроїв (наприклад, лише принтер або лише екран)
Перемикання стилів при зміні умов (орієнтація portrait/landscape, висока щільність пікселів, різні розміри вікна)

Базовий приклад для адаптива:

css

@media (max-width: 768px) {
  .container {
    font-size: 14px;
  }
}

Цей код застосується лише якщо ширина екрана ≤ 768px.

Отже: media queries дозволяють змінювати зовнішній вигляд сайту під різні пристрої та умови, - основа responsive-дизайну.

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

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

Premium

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