У цій статті я навчу вас якомога більше прийомів адаптивного дизайну, як тільки зможу за п’ять хвилин. Очевидно, цього недостатньо, щоб навчитися правильно, але це дасть вам огляд найважливіших понять, які я особисто визначаю як такі:

• Відносні одиниці 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 - найпростішого способу навчитися кодувати. Якщо ви хочете навчитися будувати сучасний веб-сайт на професійному рівні, вам слід ознайомитися з нашим адаптивним веб-дизайном веб-дизайну.