Модуль 5 · Урок 17
Fluid foundation, viewport і breakpoints
Responsive interface не є набором макетів під назви пристроїв. Це одна змістовна система, яка починається з вузького normal-flow baseline, використовує fluid constraints і змінює композицію лише там, де content реально перестає працювати.
Viewport без заборони масштабування
<meta name="viewport" content="width=device-width, initial-scale=1">Без цієї декларації mobile browser може використовувати ширший layout viewport і зменшити сторінку. width=device-width узгоджує CSS viewport із шириною пристрою, а initial-scale=1 задає початковий масштаб. Не додавайте user-scalable=no чи низький maximum-scale: користувач має зберігати можливість zoom.
Fluid baseline до першого breakpoint
*, *::before, *::after { box-sizing:border-box; }
.shell { inline-size:min(100% - 2rem, 72rem); margin-inline:auto; }
img, video { max-inline-size:100%; block-size:auto; }
.hero-title { font-size:clamp(2rem, 1.4rem + 3vw, 4.5rem); }Mobile-first означає не «мобільний дизайн окремо», а стійкий narrow baseline у normal flow. Percentages і min() дають fluid container із читабельною межею; clamp() обмежує типографіку floor і ceiling. Жодна з цих технік не виправляє нерозривні tokens — для змісту потрібна власна wrapping strategy.
Breakpoint створює evidence, а не модель телефону
Якщо content лишається читабельним і функціональним без query, breakpoint не потрібен. Значення 56rem — рішення конкретної системи, а не універсальний «tablet».
Практика й acceptance
- Додайте viewport meta до starter.
- Побудуйте fluid shell без horizontal scroll на 320 CSS px.
- Заповніть breakpoint register: failure, evidence, boundary і retest.
- Перевірте 200% text zoom, довгі заголовки та нерозривний test token.
Не ховайте проблему через overflow-x:hidden
Це може приховати focusable content. Усуньте джерело overflow і лише потім документуйте результат.
Офіційні джерела
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.