Урок 32. Обзор урока: Адаптивная, резиновая и отзывчивая вёрстка

О чём урок

Сравниваем fixed, fluid, adaptive и responsive layouts. Учимся сочетать гибкую ширину, ограничения контейнера и media queries так, чтобы интерфейс не разваливался между контрольными точками.

Дальше добавим media queries и научимся переключать раскладку явно.

Ключевые понятия

• fixed layout
• fluid layout
• adaptive layout
• responsive layout
• max-width
• min-width
• clamp()
• content container

Структура урока

Навигация

• ← Урок 31: Проблемы разных экранов: viewport и DPR
• → Урок 33: Media queries: min/max-width, ориентация и prefers-*