Адаптивная шапка

Шапка, меняющая структуру между мобильной и десктопной.

Уровень: средний 10 разделов 12 минут

1. Что это и зачем

Шапка, меняющая структуру между мобильной и десктопной.

Адаптивность — это пересборка макета под ширину вьюпорта. Медиазапросы реагируют на ширину и другие характеристики, а breakpoint'ы объявляются там, где макет «ломается», а не по устройствам.

{title} — это не «мобильная версия», а единая гибкая система, которая честно ведёт себя на любой ширине.

2. Синтаксис и пример

.header { display: flex; gap: 16px; } @media (max-width: 640px) { .header { flex-wrap: wrap; } }

Запись выше — базовый вариант использования. Обратите внимание, как адаптивная шапка вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

Современный CSS стремится от медиазапросов к внутренним механизмам: clamp(), %, container queries и flex/grid-схемы справляются без брейкпоинтов. Медиазапросы оставляют для исключений.

В реальной разметке адаптивная шапка встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

{title} — это не «мобильная версия», а единая гибкая система, которая честно ведёт себя на любой ширине.

Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

media queries работают везде; container units (@container) требуют свежих браузеров и имеют fallback на обычные правила.

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

Логотип, поиск, кнопки не «разваливаются».

Тесты с длинными названиями на малых экранах.

7. Практическое задание

Соберите шапку, работающую на телефоне.

Попробуйте выполнить задание прямо в песочнице ниже — измените код из примера и оцените результат, а затем проверьте его надёжность в DevTools.

.header { display: flex; gap: 16px; } @media (max-width: 640px) { .header { flex-wrap: wrap; } }

8. Как применять в проектах

Резиновые сетки, адаптивная типографика, «схлопывание» меню и боковых колонок, оптимизация картинок под разные экраны — типовые сценарии.

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

макет не «ломается» между брейкпоинтами;
изображения гибкие: max-width: 100%;
clamp() и гибкие сетки там, где можно без медиазапросов;
скрытие контента используется осознанно;
проверено на мобильном и десктопе;

Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам