Пошук уроків, статей та іншого контенту
Як стилі адаптуються під розмір екрана — mobile-first та відносні одиниці вимірювання.
@media дозволяє застосувати блок стилів лише тоді, коли виконується задана умова — найчастіше ширина вікна перегляду:
.card-grid {
display: grid;
grid-template-columns: 1fr; /* один стовпець за замовчуванням — для вузьких екранів */
}
@media (min-width: 768px) {
.card-grid {
grid-template-columns: repeat(3, 1fr); /* три стовпці на ширших екранах */
}
}Mobile-first — практика писати базові стилі (поза @media) для найвужчого, мобільного екрана, а потім поступово додавати min-width медіа-запити для ширших екранів, а не навпаки (стилі за замовчуванням для десктопа й max-width для мобільних). Це узгоджується із загальним принципом прогресивного покращення — базова версія працює скрізь, розширена версія додається там, де є простір.
Mobile-first також практично корисний: більшість реального веб-трафіку сьогодні — мобільний, тож стилі за замовчуванням (без жодного медіа-запиту) одразу коректні для більшості відвідувачів, а не є винятком, який довелось би перевизначати.
px — абсолютна, фіксована одиниця; передбачувана, але не масштабується разом із налаштуваннями шрифту користувача в браузері.
rem — відносно кореневого розміру шрифту (типово 16px за замовчуванням браузера) — масштабується, якщо користувач змінив базовий розмір шрифту в налаштуваннях доступності браузера; типовий вибір для розмірів шрифту й відступів.
em — відносно розміру шрифту найближчого батьківського елемента, а не кореневого, — може накопичувально множитись при вкладеності, що іноді дає несподівані результати.
vw / vh — відсоток ширини/висоти вікна перегляду; корисно для елементів, що мають масштабуватись прямо з розміром екрана (наприклад, повноекранний банер).
html {
font-size: 16px; /* базовий розмір, від якого рахуються rem */
}
.card {
padding: 1rem; /* 16px, масштабується з базовим розміром шрифту користувача */
font-size: 1.125rem; /* 18px */
}rem для шрифтів і відступів — практичний стандарт більшості сучасних проєктів, бо поважає налаштування доступності користувача (збільшений шрифт у браузері), залишаючись так само передбачуваним, як px, для решти цілей. px усе ще прийнятний для речей, що дійсно мають лишатись фіксованими незалежно від налаштувань шрифту (наприклад, товщина рамки в 1px).
Desktop-first підхід (max-width медіа-запити, стилі за замовчуванням для широкого екрана) замість mobile-first — часто призводить до складніших, менш природних перевизначень стилів для звуження макета, ніж для розширення.
px для геть усіх розмірів шрифту й відступів — ігнорує налаштування доступності користувача (збільшений системний шрифт), роблячи текст менш адаптивним, ніж міг би бути.
Тестувати адаптивність лише зміною ширини вікна десктопного браузера, не перевіряючи на реальних чи емульованих мобільних пристроях, — деякі мобільні особливості (сенсорні цілі, viewport одиниці на мобільних браузерах) поводяться інакше, ніж просте звуження вікна десктопа.
Медіа-запити (@media) застосовують стилі умовно за характеристиками екрана, найчастіше шириною; mobile-first — практика писати базові стилі для найвужчого екрана й додавати min-width правила для ширших, а не навпаки. rem (відносно кореневого розміру шрифту) — практичний стандарт для шрифтів і відступів, що поважає налаштування доступності користувача, на відміну від фіксованих px.