Вступ до медіазапитів

Конспект лекції: навіщо потрібна адаптивність, синтаксис @media, медіатипи та логічні оператори

1. Навіщо потрібна адаптивна верстка

Один і той самий сайт за однією адресою має коректно відображатися на різних пристроях: десктоп, планшет, смартфон. Різноманітність розмірів екранів та їхніх пропорцій (4:3, 16:9, 18:9, 21:9) робить адаптивність обов'язковою.

Більше 60 % трафіку сучасних сайтів — мобільні пристрої.

Два підходи до адаптивності

Підхід	Суть
Окрема мобільна версія	Окремий домен (наприклад, `m.example.com`). Для великих сервісів з великою кількістю функціоналу
Адаптивна верстка	Один домен, один HTML — різні стилі для різних ширин екрана через медіазапити

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

2. Desktop First vs Mobile First

Підхід	Принцип	Медіазапит
Desktop First	Починаємо з десктопної версії, потім прибираємо зайве для вужчих екранів	`max-width`
Mobile First (рекомендований)	Починаємо з мобільної версії, потім додаємо елементи для ширших екранів	`min-width`

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

3. Типи пристроїв у медіазапитах

Тип	Опис
`screen`	Пристрої з екраном (монітори, планшети, смартфони)
`print`	Друк
`speech`	Голосові пристрої (скрінрідери)
`all`	Усі типи пристроїв (за замовчуванням)

4. Підключення окремих CSS-файлів для різних пристроїв

Атрибут media тегу <link> дозволяє завантажувати різні CSS-файли залежно від типу пристрою або ширини екрана:

<!-- Стилі лише для екранів -->
<link rel="stylesheet" href="screen.css" media="screen">

<!-- Стилі лише для друку -->
<link rel="stylesheet" href="print.css" media="print">

<!-- Стилі для планшетів і ширше (Mobile First) -->
<link rel="stylesheet" href="tablet.css" media="(min-width: 768px)">

Перевага розділення файлів: мобільний пристрій завантажить лише свій CSS, а не весь код для десктопа і планшета. Це економить трафік та прискорює завантаження.

5. CSS для друку

Друкована версія сторінки потребує іншого оформлення:

Прибрати меню, рекламу, бокові панелі, фонові зображення
Колір тексту — чорний (кольоровий текст на друку стає блідим або невидимим)
Браузери зазвичай автоматично прибирають фон при друку для економії чорнил
Одиниці виміру на папері — абсолютні (см, мм), розмір аркуша завжди відомий

/* print.css — стилі для друку */
.navigation,
.sidebar,
.advertisement {
    display: none;
}

body {
    color: #000;
    background: #fff;
}

6. Медіазапити в CSS

Основний синтаксис медіазапиту всередині CSS-файлу:

/* Стилі застосовуються при ширині від 500px і ширше */
@media (min-width: 500px) {
    .box {
        background: red;
    }
}

Усередині @media пишемо звичайні CSS-правила. Вони застосовуються лише тоді, коли умова медіазапиту виконується.

Умова	Коли спрацьовує	Підхід
`min-width: 768px`	Ширина екрана від 768px і більше	Mobile First
`max-width: 767px`	Ширина екрана до 767px і менше	Desktop First

7. Типові точки переключення (breakpoints)

Загальноприйняті діапазони ширини для різних типів пристроїв:

Пристрій	Ширина
Мобільний (портрет)	до 767px
Планшет	768px – 1024px
Невеликий десктоп	1025px – 1439px
Великий десктоп	від 1440px

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

8. Device Pixel Ratio — щільність пікселів

Сучасні мобільні екрани мають фізичну роздільну здатність, що в 2–4 рази перевищує «CSS-пікселі».

Пристрій	Фізична роздільна здатність	CSS-роздільна здатність	DPR
iPhone SE	640 × 1136	320 × 568	2
iPhone 14 Pro	1179 × 2556	393 × 852	3

Завдяки DPR на маленькому екрані можна відобразити гладкі шрифти та чіткі зображення, не зменшуючи елементи до нечитабельного розміру.

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

min-width:
768px

спрацює однаково і на планшеті з DPR 2, і на моніторі з DPR 1.

9. Тестування адаптивної верстки

Послідовність перевірки — від найшвидшого до найнадійнішого:

Основний браузер — звужуємо вікно, перевіряємо візуально
Інші браузери на комп'ютері (Firefox, Safari, Edge)
DevTools → Toggle Device Toolbar (F12 → іконка пристроїв) — емуляція різних розмірів екрана
Реальні пристрої — найнадійніший спосіб

Емуляція ≠ реальний пристрій. Різниця: системні елементи браузера (адресний рядок, панель навігації) займають місце; рендеринг шрифтів відрізняється; деякі CSS-властивості мають баги на конкретних пристроях. Чим важливіший проєкт — тим більше реальних пристроїв треба перевірити.

Віддалений дебаг на реальних пристроях

Chrome: підключіть Android-пристрій через USB → chrome://inspect
Safari: підключіть iPhone/iPad через USB → Safari → Develop → [пристрій]

10. Приклад Mobile First з розділеними файлами

<!-- Базові стилі — мобільна версія (без медіазапитів) -->
<link rel="stylesheet" href="mobile.css">

<!-- Планшет: від 768px -->
<link rel="stylesheet" href="tablet.css" media="(min-width: 768px)">

<!-- Десктоп: від 1025px -->
<link rel="stylesheet" href="desktop.css" media="(min-width: 1025px)">

Стилі накладаються каскадно: на десктопі працюють mobile.css + tablet.css + desktop.css. Кожен наступний файл доповнює або перевизначає попередній.

11. Підсумкова таблиця

Тема	Ключове
Медіазапити	`@media (min-width: ...)` або `@media (max-width: ...)` — умовне застосування стилів
Mobile First	Базовий CSS — мобільна версія; медіазапити додають стилі для ширших екранів
Типи пристроїв	`screen`, `print`, `speech`, `all`
Розділення CSS	Атрибут `media` в `<link>` — завантажує лише потрібний CSS
Breakpoints	~768px (планшет), ~1025px (десктоп) — орієнтовні, диктуються дизайном
Device Pixel Ratio	Відношення фізичних пікселів до CSS-пікселів; медіазапити працюють з CSS-пікселями
Тестування	Браузери → DevTools → реальні пристрої; емуляція ≠ реальність