🕐 8 хв читання

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

Конспект лекції: чек-лист мобільного дизайну, медіафункції width, height, resolution, hover та pointer

1. Чек-лист приймання мобільного дизайну

Верстальник — це «очі» між дизайнером і розробником. Перед початком верстки варто перевірити макет і дати зворотний зв'язок дизайнеру.

Відмінності мобільного інтерфейсу

  • Немає hover — палець не може «навести» на елемент без натискання
  • Більша область кліку — мінімальний розмір інтерактивного елемента ~48×48 px
  • Немає клавіатури — вводити текст складніше, краще використовувати чекбокси, радіокнопки, перемикачі
  • Жести — свайп, зум; але на сайтах жести майже не використовуються

Імітація hover на мобільних

На iOS для імітації hover потрібен інтерактивний елемент — <a> або <button>. Звичайний <span> не спрацює. На Android працює з будь-яким елементом.

Не покладайтесь на hover! Важливий контент, прихований за наведенням (опис товару, підказки), на мобільних стає недоступним. Краще показувати інформацію одразу або використовувати натискання.

Що перевіряти в макеті

  • Розмір інтерактивних елементів (мін. 48×48 px)
  • Відсутність горизонтальних випадаючих списків
  • Читабельність тексту без масштабування
  • Достатні відступи між кнопками / посиланнями
  • Елементи з двома значеннями → чекбокс або перемикач
  • Мала кількість варіантів → радіокнопки замість випадаючого списку

2. meta viewport — налаштування області перегляду

Без мета-тегу viewport мобільний браузер відображає сайт як стаціонарний (із шириною ~980 px), і користувачу доводиться масштабувати вручну.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Параметр Значення Опис
width device-width Ширина viewport = рекомендована ширина пристрою (з урахуванням DPR)
initial-scale 1.0 Початковий масштаб (1.0 = 100%)
minimum-scale число Мінімальний допустимий масштаб
maximum-scale число Максимальний допустимий масштаб
user-scalable yes / no Дозволити/заборонити масштабування користувачем
Не забороняйте масштабування! user-scalable=no та maximum-scale=1 заважають користувачам збільшувати дрібний текст або розглядати зображення. Це погіршує доступність сайту.
Без viewport медіазапити на мобільних не працюватимуть коректно — браузер вважатиме ширину ~980 px замість реальних 375–414 px.

3. Медіазапроси в CSS — розширений синтаксис

Медіазапрос у CSS можна поєднувати з типом пристрою:

@media screen {
    body {
        font-size: 14px;
    }
}

Складніший запит — з умовою на ширину:

@media (max-width: 480px) {
    /* Стилі для екранів до 480px включно */
}

Стратегія: менше медіазапитів — краще

Замість двох парних запитів (до 480 і від 481) — залиште базовий CSS для мобільних і один запит від 481:

/* Базові стилі — працюють завжди (мобільні) */
.sidebar,
.content {
    width: 100%;
}

/* Від 481px — додаються колонки */
@media (min-width: 481px) {
    .content  { width: 75%; }
    .sidebar { width: 25%; }
}

4. Критичний CSS (Critical CSS)

Критичний CSS — це мінімальний набір стилів, необхідний для відображення першого екрану сайту. Він вбудовується безпосередньо в <style> всередині <head>.

Навіщо?

  • Зовнішній CSS-файл потребує часу на завантаження
  • Вбудований CSS відображається миттєво разом зі сторінкою
  • Користувач бачить контент першого екрану до завантаження основного CSS

Що впливає на швидкість

Фактор Рекомендація
Кількість файлів Менше файлів — менше запитів до сервера
Розмір файлів Мініфікація, оптимізація зображень
Складність CSS Простіші селектори — швидший рендеринг
Відкладене завантаження Lazy loading для зображень поза першим екраном
На практиці критичний CSS генерують автоматично за допомогою інструментів збірки (Webpack, Vite тощо). Вручну це робити недоцільно.

5. Одиниця em — розмір шрифту поточного елемента

1em = значення font-size поточного елемента. Якщо у елемента немає явного font-size, значення успадковується від батька вгору по ланцюжку до кореневого елемента.

.box {
    font-size: 20px;
    width: 10em;    /* 10 × 20 = 200px */
    padding: 1em;   /* 1 × 20 = 20px */
}
Обережно з em! Якщо перенести віджет у контейнер з іншим font-size, усі розміри в em зміняться пропорційно. Це може призвести до неочікуваного збільшення або зменшення елемента.

6. Одиниця rem — розмір шрифту кореневого елемента

1rem = значення font-size елемента <html> (не <body>). На відміну від em, rem не залежить від контексту вкладеності.

html {
    font-size: 10px;   /* 1rem = 10px, зручно рахувати */
}

.box {
    width: 30rem;    /* 300px */
    padding: 1.5rem; /* 15px */
}

Коли rem зручний

  • Версія для слабкозорих — змінюємо лише font-size у html, і все масштабується
  • Глобальне масштабування — якщо клієнт попросить «зменшити все в 1.5 рази», достатньо змінити одне значення
Прийом: html { font-size: 10px; } — тоді значення з макету (наприклад, 961px) просто ділиться на 10 → 96.1rem.

7. Де використовувати які одиниці

Одиниця Тип Де використовувати
px Відносна Основна одиниця — все, що не потрапляє в інші категорії
% Відносна Колонки (25%, 33%, 50%, 75%, 100%) — лише коли візуально видно поділ
em Відносна Рідко; коли є чітка пропорція відносно розміру шрифту
rem Відносна Версія для слабкозорих, глобальне масштабування
vw, vh Відносна Адаптивність (ознайомлення на наступних заняттях)
cm, mm, in Абсолютна Тільки для друку (@media print)
pt Абсолютна Поліграфія, типографіка (рідко в вебі)
Не підганяйте проценти! Якщо у вас з'являються значення типу 41.5% або 21.4% — ви, ймовірно, «підганяєте» макет. Такий код складно підтримувати. Використовуйте проценти лише для очевидних пропорцій (1/2, 1/3, 1/4).

8. Корисні CSS-скорочення (Shorthands)

inset — скорочення для позиціювання

Властивість inset замінює одночасне задання top, right, bottom, left:

.overlay {
  position: absolute;

  /* Замість top: 0; right: 0; bottom: 0; left: 0; */
  inset: 0;
}

Синтаксис аналогічний margin: одне значення — для всіх сторін, два — для вертикалі/горизонталі, чотири — для кожної сторони окремо.

Логічні властивості: margin-inline та padding-block

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

Логічна властивість Фізичний еквівалент (для LTR)
margin-inline margin-left + margin-right
padding-block padding-top + padding-bottom
margin-inline-start margin-left (для LTR) / margin-right (для RTL) 
.card {
  margin-inline: auto;       /* Центрування по горизонталі */
  padding-block: 2rem;       /* Відступи зверху та знизу */
}

place-items та place-content — швидке центрування

У Grid-контейнері place-items — скорочення для align-items + justify-items, а place-content — для align-content + justify-content:

.container {
  display: grid;
  place-items: center;   /* Центрує контент по обох осях */
}
Найкоротше центрування: display: grid; place-items: center; — два рядки для ідеального центрування елементів і по горизонталі, і по вертикалі.

9. Не переоптимізовуйте з em

Поширена помилка — побачити, що заголовок у 2.5 рази більший за текст, і замінити font-size на 2.5em. Це працює, поки дизайнер не змінить один розмір без іншого.

Погана оптимізація

.service p {
    font-size: 16px;
}
.service h2 {
    font-size: 2.5em;  /* 40px, але залежить від font-size батька */
}

Краще — явні значення

.service p {
    font-size: 16px;
}
.service h2 {
    font-size: 40px;
}

@media (max-width: 768px) {
    .service p  { font-size: 14px; }
    .service h2 { font-size: 28px; }
}
Правило: значення в CSS мають збігатися з тим, що ви бачите в макеті. Якщо в макеті 40px — пишіть 40px, а не 2.5em. Так простіше шукати та змінювати.

10. Схлопування зовнішніх відступів (margin collapsing)

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

.block-1 {
    margin-bottom: 70px;
}
.block-2 {
    margin-top: 30px;
}
/* Відстань між блоками = 70px (не 100px!) */
У flex-контейнері схлопування не відбувається! Відступи додаються: 70 + 30 = 100px.
Контекст Вертикальні margin
Звичайний потік Схлопуються (залишається більший)
Flex-контейнер Додаються (сума)
Grid-контейнер Додаються (сума)

11. Додаткові медіафункції

Крім min-width / max-width існують інші медіафункції:

Функція Приклад Опис
orientation @media (orientation: landscape) Альбомна орієнтація пристрою
orientation @media (orientation: portrait) Портретна орієнтація пристрою
min-height @media (min-height: 600px) Мінімальна висота viewport
max-height @media (max-height: 400px) Максимальна висота viewport
Найчастіше використовують min-width / max-width. Орієнтація — рідше. Висота — ще рідше, бо сторінка прокручується вертикально.

12. Медіафункції aspect-ratio та orientation

aspect-ratio

Визначає співвідношення ширини до висоти відображуваної області (viewport). Записується як дріб:

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

Підтримує приставки min- та max-. Щоб зрозуміти, яке співвідношення більше — переведіть дріб у десяткове: 16/9 = 1.78, 16/10 = 1.6. Отже, min-aspect-ratio: 16/9 не включає монітори 16:10.

Популярні співвідношення сторін

Співвідношення Де зустрічається
4:3 Старі монітори з CRT-трубкою, дизайнерські монітори
16:9 Найпопулярніше: Full HD, HD, 4K
3:2 Microsoft Surface, деякі сучасні ноутбуки
16:10 MacBook Pro, деякі ноутбуки (більше висоти — зручніше для коду)
21:9 Ультраширокі монітори, кінематографічний формат

orientation

Визначає орієнтацію пристрою. Приймає два значення:

  • portrait — вертикальна (висота > ширина)
  • landscape — горизонтальна (ширина > висота)
@media (orientation: landscape) {
  /* Стилі для горизонтальної орієнтації */
}

Комбінований медіазапит

Для коректної роботи на різних пристроях часто потрібна комбінація:

@media (min-width: 641px),
       (orientation: landscape) and (max-width: 640px) {
  /* Великі екрани АБО горизонтальні телефони */
  .menu {
    display: flex;
    flex-wrap: wrap;
  }
  .menu__item {
    width: 49%;
  }
}

Просто orientation: landscape недостатньо — на вертикально розташованому iPad (великий екран!) елементи будуть по одному в рядку. А вертикально повернутий монітор теж визначиться як portrait.

13. Інструменти верстальника

Інструмент Призначення
Chrome Workspaces Зміни CSS у DevTools автоматично зберігаються у файл — без ручного копіювання
Pixel Perfect (розширення) Накладає зображення макету поверх сайту для піксельного порівняння
letter-spacing Регулює міжлітерну відстань (можна від'ємне значення для «ущільнення»)
Figma Дозволяє копіювати часткові CSS-властивості елементів, прискорює верстку

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

Тема Ключові моменти
meta viewport width=device-width, initial-scale=1.0 — обов'язковий тег для адаптивної верстки
Медіазапити в CSS @media (min-width: ...) — Mobile First; @media (max-width: ...) — Desktop First
Критичний CSS CSS першого екрану вбудовується в <style> для миттєвого рендерингу
em 1em = font-size поточного елемента; залежить від контексту
rem 1rem = font-size елемента <html>; незалежний від вкладеності
CSS Shorthands inset (позиціювання), margin-inline/padding-block (логічні), place-items (центрування)
Схлопування margin У звичайному потоці вертикальні margin схлопуються; у flex/grid — ні
overflow: hidden Костиль для горизонтальної прокрутки — краще знайти першопричину
aspect-ratio Співвідношення ширини/висоти viewport; підтримує min-/max-
orientation portrait (вертикально) / landscape (горизонтально)
🔍
Почніть вводити назву лекції або тему