Медіазапити

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

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

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

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

min-width

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

max-width

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

print

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

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

all

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

screen

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

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

and / or / not / only

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

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

Фонові зображення під різний розмір єкранів (у CSS)

Викачуємо зораження під кожен розмір єкрана

В backround-image в css під кжен медіа-запит вказуємо шлях до кожного розміру

Потім викачуємо під кожен розмір дисплею 2х і додаємо картинку (для retina-єкранів)

Контектні зображення під різний розмір єкранів (у HTML)

Викачуємо зораження під кожен розмір 2x єкрана

у тегу imgпере src додаємо

<img
srcset="./image1.jpg 1x,
./image1.jpg 2x"
src="./original.jpg" />

Підхід «Mobile First»

вимагає починати створення сайту із мобільної версії. Давай з’ясуємо переваги цього підходу.

selector {
/* Базові стилі */
}
@media (min-width: ширина-планшета) {
selector {
/* Стилі планшета */
}
}
@media (min-width: ширина-десктопа) {
selector {
/* Стилі робочого столу */
}
}

Рекомендації

При формуванні у «Mobile First»

Спочатку робимо макет для ширини 320px

потім описуємо першу реперну точку медіа-запиту з макету (наприклад для min-width: 380px)

кожну наступну реперну точку під попередньою описуємо (каскад стилів)

Додаємо всередині кожного медіа-запиту ще один вкладенний запит

@media (min-resolution: 192dpi) {
.box {
background-image: url("https://picsum.photos/id/237/640/480");
}
}