Медіазапити

• Це інструмент, який робить можливим створення сучасних адаптивних веб-сторінок, які однаково добре виглядають на будь-якому екрані: десктопі або смартфоні.

Робота з медіазапитами зводиться до застосування того чи іншого CSS-правила. Вибір та використання певного CSS-правила залежить від таких факторів, як розмір вікна браузера (області перегляду, в’юпорта), налаштування браузера, можливості пристрою і т.д.

• правила, які перебувають у медіазапитах, беруть участь у стандартному каскадуванні при складанні фінальних стилів елемента.

@media screen and (min-width: 900px) {
  body {
    background-color: orange;
  }
}

визначає мінімальну ширину області перегляду. У разі, якщо екран відповідає значенню в min-width, будуть застосовані вкладені CSS-правила.

визначає максимальну ширину в'юпорта, до якої включно будуть застосовуватися вкладені CSS-правила.

визначити стилі, що будуть застосовані при відправці на друк. Друк може виконуватися на фізичному принтері або віртуально.

@media print {
  body {
    color: green;
  }
}

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

@media screen and (min-width: 400px) {
  /* ... */
}

Якщо не вказати тип носія, за замовчуванням буде використано значення all. Воно означає будь-який пристрій. </code>

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

@media (min-width: 400px) {
  /* ... */
}

Медіазапити підтримують логічні оператори and, or, not, Ці оператори подібні до тих, які використовуються в математиці, логіці або мовах програмування. Якщо оператор не вказано, використовується значення за замовчуванням — only.

@media only|not media-type ****only|and|not ****(media-feature) {
  /*
    Набір CSS-правил, які потрібно застосувати до документа,
    якщо умова перевірки медіатипу та виразу істинна
  */
}