🎨

Модуль 2. CSS и оформление

Занятие 22
Адаптивность

Сегодня мы научим страницу подстраиваться под телефон: на узком экране колонки встанут друг под другом.

👀

Сегодня сделаем вот такое

📱

Один сайт — все экраны

🖥 Монитор · 💻 Ноутбук · 📟 Планшет · 📱 Телефон

Больше половины людей смотрят сайты с телефона.

Адаптивный сайт перестраивается под экран.

🔎

Шаг 1: тег viewport

В head каждой страницы:

<meta name="viewport" content="width=device-width, initial-scale=1">

Без него телефон показывает уменьшенную «компьютерную» версию с крошечными буквами 🔬

📐

Шаг 2: гибкие размеры

  • % — от родителя
  • rem — от шрифта (16px)
  • vw / vh — от окна

max-width вместо width

<div class="container">
  <img src="/images/mountain.svg" alt="Горы">
  <p>Контейнер не шире 400px, но на узком экране сжимается.</p>
</div>
.container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 0 16px;
  font-family: sans-serif;
}
img { max-width: 100%; height: auto; }
❓

Шаг 3: медиазапрос

@media (max-width: 600px) { … }

«Если экран не шире 600px — то примени эти стили»

  • max-width — до (телефоны)
  • min-width — от (компьютеры)
<h1>Мой город</h1>
h1 {
  color: white;
  background: #0984e3;
  padding: 20px;
  font-family: sans-serif;
}

@media (max-width: 600px) {
  h1 { background: #e17055; }
}
🔄

Ряд превращается в колонку

  • На компьютере — карточки в ряд
  • На телефоне — друг под другом
  • В @media — только то, что меняется

Нажми «📱 Телефон» в редакторе урока!

<main class="cards">
  <article class="card">🏛 Музей</article>
  <article class="card">🌳 Парк</article>
  <article class="card">🎡 Набережная</article>
</main>
.cards { display: flex; gap: 1rem; }
.card {
  flex: 1; padding: 2rem 1rem; text-align: center;
  font: 1.2rem sans-serif; background: #dff9fb; border-radius: 12px;
}

@media (max-width: 600px) {
  .cards { flex-direction: column; }
}
📋

Что меняем на телефоне

  • ↕️ Ряды → колонки
  • 🍔 Меню в колонку или с переносом
  • 🔠 Заголовки меньше, текст ≥ 16px
  • 👆 Кнопки ≥ 44px — под палец
  • 🙈 Второстепенное — display: none
🛠

Как проверить

  1. F12 → значок телефона (Ctrl+Shift+M)
  2. Выбрать ширину 360px
  3. Или сузить окно мышкой
  4. Лучше всего — настоящий телефон

Горизонтальной прокрутки быть не должно!

🃏

Запомни!

  • <meta name="viewport" …>Обязательный тег для телефонов
  • @media (max-width: 600px) { }Стили для узких экранов
  • max-width: 900pxНе шире 900px
  • %, rem, vw, vhОтносительные единицы
  • flex-direction: columnКолонка вместо ряда
  • Ctrl+Shift+M (в F12)Режим устройства
⌨️

Практика: Мобильная версия страницы

  1. Сделай шапку и три карточки в ряд с помощью Flexbox.
  2. Добавь медиазапрос: при ширине до 600px карточки встают в колонку.
  3. На телефоне уменьши размер заголовка и спрячь лишнюю картинку (display: none).
  4. Проверь страницу в режиме «Телефон».

🚀 Со звёздочкой: Сделай «бургер-меню»: на телефоне пункты меню прячутся, а вместо них — значок ☰ (подсказка: details и summary).

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

Подведём итоги

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

✨ По желанию: Открой свою страницу увлечений на телефоне и запиши, что там неудобно.