Модуль 1 · урок 11 з 14
Одиниці й адаптив
Одиниці — це те, через що верстка «майже правильна»: усе на місці, але при зміні шрифту в системі або при зумі все їде. Правило просте — розміри тексту й відступи в відносних одиницях, товщини ліній у пікселях.
Яку одиницю коли брати
| Одиниця | Від чого рахується | Де доречна |
|---|---|---|
px | Ні від чого, фіксована | Рамки, тіні, дрібні радіуси |
rem | Розмір шрифту <html> | Шрифти, відступи, розміри блоків — основна робоча одиниця |
em | Розмір шрифту самого елемента | Внутрішні відступи кнопки, щоб масштабувались разом із текстом |
% | Розмір батька | Ширини всередині контейнера |
fr | Вільне місце в grid | Колонки сітки |
dvh / svh | Висота вікна з урахуванням панелей | Повноекранні розкладки |
ch | Ширина символу «0» | Обмеження довжини рядка тексту: max-width: 68ch |
Чому rem, а не px. Якщо людина збільшила базовий шрифт у налаштуваннях браузера
(а це роблять частіше, ніж здається), інтерфейс на rem масштабується цілком,
а на px — лишається дрібним. Це і зручність, і пункт доступності.
Проста математика: за замовчуванням 1rem = 16px, тож 0.875rem = 14px.
clamp: розмір, який сам себе тримає в межах
/* clamp(мінімум, бажане, максимум) */
h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
/* те саме для відступів і ширин */
.page { padding-inline: clamp(16px, 4vw, 48px); }Один рядок замінює три медіазапити: заголовок плавно росте разом із вікном, але ніколи не стане меншим за 1.75rem і більшим за 3rem.
Медіазапити: mobile-first
/* базові стилі — для вузького екрана, без запитів */
.layout { display: grid; gap: 16px; }
/* далі ДОДАЄМО складність для широких */
@media (min-width: 1024px) {
.layout { grid-template-columns: 260px 1fr; }
}Чому саме так: у mobile-first базовий стан простіший, і кожен медіазапит лише додає,
а не скасовує. У зворотному підході (max-width) доводиться відміняти те,
що вже написав, — звідси й ростуть перебивання.
У модулі 3 лід згадує фіксовані десктопні роздільності — це нормально для внутрішніх ентерпрайз-панелей: їх відкривають на робочому моніторі, а не на телефоні. Але навіть тоді розкладка має тягнутись між умовними 1280 і 1920, а панелі — мати власний скрол, а не розсувати сторінку. Тобто «фіксовано» означає «без мобільної версії», а не «жорсткі пікселі».