Опорная идея
Сайт открывают и на телефоне, и на большом мониторе. Адаптивная вёрстка подстраивает страницу под ширину экрана.
Первый обязательный шаг — мета-тег в <head>: <meta name="viewport" content="width=device-width, initial-scale=1"> Без него мобильный браузер покажет «уменьшенную десктопную» версию.
Далее используют медиа-запросы — блоки стилей, которые включаются при определённой ширине:
.menu { flex-direction: row; }
@media (max-width: 600px) { .menu { flex-direction: column; } h1 { font-size: 24px; } }
Здесь на узких экранах (до 600px) меню становится столбиком, а заголовок мельче. Популярный подход «mobile-first»: сначала пишут стили для телефона, затем медиа-запросами добавляют изменения для широких экранов.