У цій статті я навчу вас якомога більше прийомів адаптивного дизайну, як тільки зможу за п’ять хвилин. Очевидно, цього недостатньо, щоб навчитися правильно, але це дасть вам огляд найважливіших понять, які я особисто визначаю як такі:
- Відносні одиниці CSS
- Медіа-запити
- Flexbox
- Адаптивна типографіка
Якщо ви хочете пізніше заглибитися в тему, ви можете перевірити наш адаптивний веб-розробник, завантажувальний табір на Scrimba, який дозволить вам створювати чуйні веб-сайти на професійному рівні.
Але поки що, почнемо з основ!
Відносні одиниці CSS
В основі адаптивного веб-дизайну лежать відносні одиниці CSS. Це одиниці, які отримують свою вартість з якоїсь іншої зовнішньої вартості. Це зручно, оскільки дозволяє, наприклад, ширину зображення базуватись на ширині браузера.
Найпоширеніші з них:
- %
- ем
- рем
- vw
- vh
У цій статті ми почнемо з відсоткової одиниці %
, а потім розглянемо rem
одиницю виміру в останньому розділі.
Скажімо, у вас дуже простий веб-сайт, наприклад:

Його HTML-код є лише таким:
Welcome to my website
Як ви можете бачити з GIF нижче, наше зображення за замовчуванням матиме фіксовану ширину:

Це не особливо чутливо, тому замінимо це на 70 відсотків. Ми просто зробимо наступне:
.myImg { width: 70%; }
Це встановлює ширину зображення на 70 відсотків від ширини його батьківського елемента, який є тегом. Оскільки
тег охоплює всю ширину екрана, зображення завжди складатиме 70 відсотків самого екрану.
Ось результат:

І ось як легко створити чуйний образ!
Використання медіа-запитів для покращення мобільного досвіду
Однак у нас є одна проблема з адаптивним макетом, яка полягає в тому, що це виглядає дивно на дуже маленьких екранах. Ширина 70% - це звуження при перегляді на мобільному. Просто подивіться на себе:
U

U
Покращити його вигляд у цій ситуації - ідеальне завдання для запитів медіа. Вони дозволяють застосовувати різні стилі на основі, наприклад, ширини екрана. В основному можна сказати, що якщо екран має ширину менше 768 пікселів, використовуйте інший стиль.
Ось як ми створюємо медіа-запит у CSS:
@media (max-width: 768px) { .myImage { width: 100% } }
Цей блок CSS застосовуватиметься лише в тому випадку, якщо ширина екрана менше 768 пікселів.
Ось результат:

Як бачите, на сторінці є точка зупинку, де зображення раптом стає ширшим. Саме тоді браузер має ширину 768 пікселів, і зображення міняється місцями між 70%
і 100%
.
Використання Flexbox для навігаційної панелі
Далі - Flexbox. Ви просто не можете дізнатися про чуйність, не дізнавшись про Flexbox. Це змінило гру адаптивного дизайну, коли вона була представлена кілька років тому, оскільки набагато полегшує позитивне розташування елементів уздовж осі.
Для використання Flexbox ми зробимо наш сайт трохи складнішим, додавши навігаційну панель над заголовком. Ось HTML для цього:
Home About me Contact
За замовчуванням це буде просто виглядати так.
U

U
Наші елементи навігації стиснуті в ліву сторону, а це не те, що ми хочемо. Ми хочемо, щоб вони були розташовані рівномірно по всій сторінці.
Для цього ми просто перетворимо nav-контейнер у flexbox, а потім використаємо магічну justify-content
властивість.
nav { display: flex; justify-content: space-around; }
display: flex
Перетворює в еластичну коробку, і
justify-content: space-around
повідомляє браузеру , що елементи всередині гнучкої коробки повинні мати простір навколо них. Отже, браузер розподіляє весь залишок місця порівну навколо трьох елементів.
Ось як це виглядає. І як ви помітите, це гарно масштабується:

U
Адаптивна типографіка: rem
Останній крок - зробити нашу типографіку також чуйною. Розумієте, я хочу, щоб панель навігації та заголовок трохи зменшились, коли екран має ширину менше 768 пікселів (наша точка зупинки медіа-запитів, пам’ятаєте?).
Одним із способів зробити це було б зменшити всі розміри шрифту в медіа-запиті, наприклад:
@media (max-width: 768px) { nav { font-size: 14px; } h1 { font-size: 28px; } }
Однак це не ідеально. У нас може з’явитися кілька точок зупинки в додатку, а також мати кілька елементів (h2, h3, абзаци тощо). У результаті нам доведеться відстежувати всі елементи у всіх різних точках зупинку. Буде безлад!
Однак, швидше за все, вони збираються відноситись один до одного більш-менш однаково протягом різних точок зупинку. Наприклад, h1
завжди буде більше, ніж paragraph
.
То що, якби я міг відрегулювати один коефіцієнт, а потім зробити так, щоб решта розмірів шрифту масштабувалася відносно цього фактора?
Введіть ремс!
A rem
в основному це: значення розміру шрифту, яке ви встановили для свого елемента. Сподобалось це:
html { font-size: 14px; }
Тож у цьому документі один rem
дорівнює 14 пікселів.
Це означає, що ми можемо встановити всі розміри шрифту на нашому веб-сайті в rem
одиницях, наприклад:
h1 { font-size: 2rem; } nav { font-size: 1rem; }
І тоді ми просто змінимо значення розміру шрифту для тегу в нашому медіа-запиті. Це забезпечить, що розмір шрифту для нашого
h1
та nav
елементів також зміниться.
Ось як ми змінюємо своє rem
значення в медіа-запиті:
@media (max-width: 768px) { html { font-size: 14px } }
І просто так, у нас є точка зупинки для всіх розмірів шрифту. Зверніть увагу, як змінюється розмір шрифту, коли сторінка перетинає позначку 768 пікселів:

Минуло лише п’ять хвилин, але тепер ви насправді навчилися робити розміри шрифту, зображення та елементи навігаційної панелі, щоб відповідати ширині сторінки. Це досить добре, і ви зробили перші кроки до вивчення надзвичайно цінних навичок створення чуйних веб-сайтів.
Якщо ви зацікавлені продовжити цю навчальну мандрівку, я б порекомендував вам поглянути на наш масштабний курс Скрімби з цього питання! Його викладає один із найпопулярніших викладачів YouTube з цього питання, і це підведе вас до професійного рівня в адаптивному веб-дизайні.
Щасливого кодування :)
Дякуємо за читання! Мене звуть Пер Борген, я співзасновник Scrimba - найпростішого способу навчитися кодувати. Якщо ви хочете навчитися будувати сучасний веб-сайт на професійному рівні, вам слід ознайомитися з нашим адаптивним веб-дизайном веб-дизайну.
