Медіа запити (media queries) в CSS

Медіа запити (media queries) є потужним інструментом у CSS, який дозволяє розробникам створювати адаптивні та респонсивні веб-сайти. Вони дозволяють застосовувати різні стилі залежно від характеристик пристрою користувача, таких як ширина екрану, орієнтація пристрою чи тип носія.

Що таке медіа запити?

Медіа запити - це функція CSS3, яка дозволяє застосовувати стилі залежно від характеристик пристрою, на якому відображається веб-сторінка. Вони працюють шляхом перевірки певних умов, і якщо ці умови виконуються, застосовуються відповідні стилі.

Синтаксис медіа запиту виглядає наступним чином:

@media тип_носія and (умова) {
  /* CSS правила */
}

Де “тип_носія” може бути, наприклад, “screen” (для екранів), “print” (для друку), “all” (для всіх типів носіїв), а “умова” - це певна характеристика пристрою, яку ми перевіряємо.

Більше можна почитати на сайті MDN.

Типи носіїв

Типи носіїв вказують, для якого виду пристрою призначені стилі. Найпоширеніші типи носіїв включають:

• screen: для комп’ютерних екранів, планшетів, смартфонів тощо.
• print: для друкованих документів та попереднього перегляду друку.
• speech: для синтезаторів мовлення.
• all: для всіх типів носіїв.

Наприклад, якщо ми хочемо застосувати певні стилі тільки при друку, ми можемо використати такий медіа запит:

@media print {
  body {
    font-size: 12pt;
    color: black;
  }
}

Умови медіа запитів

Умови в медіа запитах дозволяють нам точніше визначити, коли застосовувати певні стилі. Ось деякі поширені умови:

Ширина viewport

Ми можемо застосовувати стилі залежно від ширини viewport (видимої області сторінки). Це особливо корисно для створення респонсивного дизайну.

@media screen and (max-width: 600px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

У цьому прикладі, коли ширина екрану 600 пікселів або менше, контейнер займатиме 100% ширини і матиме внутрішній відступ 10 пікселів.

Орієнтація пристрою

Ми можемо застосовувати різні стилі залежно від того, чи пристрій знаходиться в портретній чи ландшафтній орієнтації:

@media screen and (orientation: landscape) {
  .sidebar {
    float: left;
    width: 30%;
  }
  
  .main-content {
    float: right;
    width: 70%;
  }
}

Цей код розміщує бічну панель зліва, а основний вміст справа, коли пристрій знаходиться в ландшафтній орієнтації.

Комбінування умов

Ми можемо комбінувати кілька умов в одному медіа запиті, використовуючи логічні оператори and, or, та not.

@media screen and (min-width: 600px) and (max-width: 900px) {
  .container {
    width: 80%;
    margin: 0 auto;
  }
}

Цей медіа запит застосовується, коли ширина екрану знаходиться між 600 і 900 пікселями.

Breakpoints

Breakpoints - це точки, в яких наш дизайн змінюється, щоб краще відповідати розміру екрану. Вибір правильних breakpoints є ключовим для створення ефективного респонсивного дизайну.

Хоча конкретні breakpoints можуть відрізнятися залежно від дизайну, ось загальний підхід:

/* Мобільні пристрої */
@media screen and (max-width: 600px) {
  /* Стилі для мобільних */
}

/* Планшети */
@media screen and (min-width: 601px) and (max-width: 900px) {
  /* Стилі для планшетів */
}

/* Десктопи */
@media screen and (min-width: 901px) {
  /* Стилі для десктопів */
}

Підхід “Mobile First”

“Mobile First” - це підхід до веб-дизайну, при якому ми спочатку розробляємо версію сайту для мобільних пристроїв, а потім поступово додаємо складніші макети та функціональність для більших екранів.

У CSS це виглядає так:

/* Базові стилі для всіх пристроїв */
.container {
  width: 100%;
  padding: 10px;
}

/* Стилі для планшетів */
@media screen and (min-width: 600px) {
  .container {
    width: 80%;
    margin: 0 auto;
  }
}

/* Стилі для десктопів */
@media screen and (min-width: 900px) {
  .container {
    width: 70%;
    max-width: 1200px;
  }
}

Цей підхід забезпечує, що наш сайт добре виглядає на всіх пристроях, починаючи з найменших.