Медіа-запити

PreviousАдаптивна верстка NextМетатег viewport

Last updated 1 year ago

Медіа-запити

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

Іншими словами відбувається застосування тих чи інших стилів у залежності від умови. Найчастіше ця умова - ширина екрана.

Як застосовуються медіазапити:

Розробник описує набір медіа-запитів і CSS-правил
Браузер відстежує зміну розміру в'юпорту
Браузер застосовує CSS-правила з медіа-запитів, що відповідають поточному розміру в'юпорту.

Синтаксис

Медіа-запити виглядають так:

@media (умова) {
  /* стилі для елементів, які відповідають умові */
}

Ширший загальний синтаксис виглядає так:

@media  [not|only]  <media type>  [and (<one or more features>)] {
  /* стилі для елементів, які відповідають умові */
}

Медіа-запит оголошують директивою @media. Після цього вказують тип пристрою (media-type) (опціонально, бо за замовчанням це screen) і медіа-функції (media-feature). Медіа-функція перевіряє якусь характеристику пристрою - зазвичай ширину в'юпорту. Медіа-функція приводиться до булевого значення - true і false. Якщо умова виконується, то застосовуються вказані стилі, якщо ні, то стилі ігноруються.

Наприклад, необхідно поміняти колір елемента з синього на жовтий при ширині в'юпорту 800px і ширше.

  @media screen and (min-width: 800px) {
      background-color: yellow;
  }

Щоб побачити цей ефект в дії відкрийте приклад CodePen в окремому вікні натиснувши Edit on Codepen і за допомогою курсора міняйте ширину вікна. На 800px ви побачите зміну кольору елемента.

Умова перевірки буває різною. Здебільшого достатньо вказати медіа-тип пристрою (найчастіше screen), і перевірити тільки ширину в'юпорту.

/* Медіа-запит, який застосується під час друку документа */
@media print {
  /* Опис стилів */
}

/* Медіа-запит, який застосується при ширині в'юпорту більше 800px */
@media screen and (min-width: 800px) {
  /* Опис стилів */
}

/* Тип screen можна не вказувати, якщо стилі тільки для екранів */
@media (min-width: 800px) {
  /* Опис стилів */
}

Медіа-типи

Медіа-типи - це характеристики пристроїв чи середовища, на яких відображається сторінка в Інтернеті. При використанні медіа-запитів можна специфікувати різні медіа-типи, щоб змінювати стилі для різних умов перегляду.

all: Застосовується до всіх типів пристроїв.

@media all and (max-width: 768px) {
  /* стилі для всіх типів пристроїв з шириною екрану менше 768 пікселів */
}

screen: Застосовується до екранів та інших пристроїв з відображенням (комп'ютери, смартфони, планшети тощо).

@media screen and (min-width: 1024px) {
  /* стилі для екранів з шириною екрану більше або дорівнює 1024 пікселів */
}

print: Застосовується до сторінок, які видаються для друку.

@media print {
  /* стилі для друку */
}

speech: Застосовується до голосових синтезаторів (екранні читачі, програми для читання тексту тощо).

@media speech {
  /* стилі для голосових синтезаторів */
}

only: Вказує на конкретний медіа-тип та виключає всі інші типи.

@media only screen and (min-width: 768px) {
  /* стилі для екранів з шириною екрану більше або дорівнює 768 пікселів */
}

Медіа-функції

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

width() і height(): Перевіряють ширину або висоту екрану в пікселях або інших одиницях. Це - дві медіа-функції, які найчастіше використовують і вони дозволяють визначати ширину в'юпорту браузера - min-width і max-width. на яких будуть застосовуватися стилі.

@media (max-width: 768px) {
  /* стилі для екранів з шириною екрану менше або дорівнює 768 пікселів */
}

@media (min-width: 1024px) {
  /* стилі для екранів з шириною екрану більше або дорівнює 1024 пікселі */
}

orientation(): Перевіряє орієнтацію екрану (portrait або landscape).

@media (orientation(landscape)) {
  /* стилі для горизонтальної орієнтації екрану */
}

aspect-ratio(): Перевіряє відношення сторін по ширині та висоті екрану.

@media (aspect-ratio(16/9)) {
  /* стилі для екранів з відношенням сторін 16:9 */
}

hover() і pointer(): Перевіряють наявність можливості наведення курсору (hover) та типу введення (pointer).

@media (hover) {
  /* стилі для пристроїв з можливістю наведення курсору */
}

@media (pointer) {
  /* стилі для пристроїв з покажчиком введення (наприклад, тачскріни) */
}

resolution(): Перевіряє роздільну здатність екрану у DPI (dots per inch) або DPPX (dots per pixel).

@media (resolution: 300dpi) {
  /* стилі для екранів з роздільною здатністю 300 DPI */
}

Медіа-функції min-width і max-width

Оскільки у переважній більшості використовують саме ці медіа-функції, приділимо саме їм особливу увагу. Розглянемо приклад:

body {
  background-color: green;  
  
  @media (max-width: 768px) {
  background-color: red;
  }
  
  @media (min-width: 1024px) {
  background-color: blue;
  } 
}

Якщо представити ширину в'юпорту як пряму від 0 до нескінченності, то ми описуємо проміжок, на якому необхідно застосувати якісь стилі.

В нашому прикладі до 768px включно застосується червоний колір фону, а від 1024px включно - синій колір фону. У всіх інших випадках застосується загальний стиль (якщо він прописаний).

Щоб конкретно описати проміжок від якоїсь до якоїсь ширини вʼюпорту, наприклад від 769px до 1023px необхідно використовувати логічні оператори для складових медіа-функцій (будуть розглянуті далі).

Розмір в'юпорту, за якого вся верстка або її окремі частини змінюють свої стилі, тобто змінюється дизайн, називають точкою перелому (breakpoint). В нашому прикладі це 768px і 1024px.

Щоб побачити цей ефект в дії відкрийте приклад CodePen в окремому вікні натиснувши Edit on Codepen і за допомогою курсора міняйте ширину вікна. На 768px і 1024px ви побачите зміну кольору <body>.

Вкладеність і медіазапити

Коли описуємо стилі у нас виникає цілий перелік селекторів у файлі стилів. Якщо при цьому ми ще застосовуємо медіа-запити, то виникає два підходи оформлення цих медіазапитів.

Можна створити загальний медіазапит і всередині описати селектори.

body {
  background-color: #779988;
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

@media screen and (min-width: 800px) {
  body {
  background-color: #FF9988;
  }
 
.box {
  background-color: green;
  }    
}

Можна в кожному селекторі описувати медіазапити.

body {
  background-color: #779988;
  
  @media screen and (min-width: 800px)   {
   background-color: #FF9988; 
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  
  @media screen and (min-width: 800px)   {
   background-color: green; 
  }
}

На практиці все ж частіше застосовується другий спосіб. Але обирає розробник. Головне, щоб у всьому проєкті був однаковий спосіб оформлення медіа-запитів.

Логічні оператори у медіазапитах

У медіа-запитах можна використовувати логічні оператори для комбінування умов і забезпечення більш точного вибору елементів, які відповідають певним характеристикам. Основні оператори: not, and, or(,) і only.

@media  [not|only]  <media type>  [only|and|not (<one or(,) more features>)] {
  /* стилі для елементів, які відповідають умові */
}

Оператор and

and: Логічний оператор "і". Використовується для вказання, що обидві умови повинні бути вірними.

@media screen and (min-width: 769px) and (max-width: 1023px) {
  body {
    background-color: green;
  }
}

Тобто цей медіа-запит застосується на всіх ширинах вʼюпорту від 769px до 1023px.

Оператор or(,)

or: Логічний оператор "або". Використовується для вказання, що хоча б одна з умов повинна бути вірною. В записах замість ключового слова or використовують знак коми. У майбутніх редакціях CSS, оператор коми буде замінений на оператор or.

@media screen and (max-width: 768px), (min-width: 1024px) {
  body {
    background-color: green;
  }
}

Медіа-запит застосується, якщо виконається хоча б одна умова. В даному прикладі застосується на ширині вʼюпорту до 768px включно і від 1024px включно.

Тобто фактично це ніби два окремі медіа-запити в одному виконанні.

@media (max-width: 768px) {
  body {
    background-color: green;
  }
}

@media (min-width: 1024px) {
  body {
    background-color: green;
  }
}

Оператор not

not: Логічний оператор "не". Використовується для вказання, що умова не повинна бути вірною. Тобто фактично це скасування медіазапиту. Використовується дуже рідко, в якихось специфічних випадках.

Наприклад, умова за якої стилі повинні застосуватися скрізь, крім друку.

@media not print {
  /* Опис стилів */
}

При використанні оператора not обов'язково потрібно вказувати тип носія, тому що за замовчуванням для нього буде встановлено значення all і вираз not all буде читатися буквально як «не всі», і медіа-запит ніколи не виконається.

/* Медіа-запит ніколи не виконається */
@media not (max-width: 768px) {
  /* Опис стилів */
}

/* Медіа-запит виконається, якщо ширина буде більша за 768px. */
@media not screen and (max-width: 768px) {
  body {
    background-color: red;
  }
}

/*
    Краще використовувати такий медіа-запит min-width: 768px.
*/
@media (min-width: 768px) {
  body {
    background-color: red;
  }
}

Перевизначення стилів

До одного селектора можна застосовувати кілька медіа-запитів. Просто при досягненні певної умови стиль буде перевизначатися.

В розробці так і роблять - спочатку задають базовий стиль і потім по черзі перераховують медіа-запити і як буде перевизначатися стиль.

Браузер спочатку застосовує базовий стиль і переходить до перевірки медіа-запитів, якщо він задовольняє умову, перевизначає стиль і перевіряє наступний медіа-запит і так далі.

body {
  background-color: violet;
  
  @media (min-width: 460px) {
   background-color: blue;
  }
  
  @media (min-width: 768px) {
   background-color: red;
  }
  
  @media (min-width: 1024px) {
   background-color: green;
  }
  
  @media (min-width: 1200px) {
   background-color: yellow;
  }
}

Як відбувається перевизначення стилів за медіа-запитами чудово видно в інструментах розробника.

Перевизначаються тільки однакові властивості, а не повністю все правило. Завдяки цьому, можна робити "листковий пиріг" зі стилів, не дублюючи попередні, які підходять і для поточного медіа-запиту.

Точки перелому (breakpoint)

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

Ось відповідні записи цих медіа-запитів. І обовʼязково починається прописування стилів з базового стилю.

@media screen and (min-width: 320px) {
}

@media screen and (min-width: 480px) {
}

@media screen and (min-width: 600px) {
}

@media screen and (min-width: 768px) {
}

@media screen and (min-width: 800px) {
}

@media screen and (min-width: 1024px) {
}

@media screen and (min-width: 1280px) {
}

@media screen and (min-width: 1440px) {
}

PreviousАдаптивна верстка NextМетатег viewport

Last updated 1 year ago