🚀

Модуль 3. Проектная работа

Занятие 29
Проект: адаптивность

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

👀

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

🕵️

Сегодня мы — тестировщики

  1. 🔍 Ищем проблемы на ширине 360px
  2. 📝 Записываем список
  3. 🔧 Исправляем по одной

F12 → 📱 (Ctrl + Shift + M)

🚨

Что обычно ломается

  • ↔️ Горизонтальная прокрутка
  • 🍔 Меню не помещается
  • 🥢 Карточки сжаты в полоски
  • 🖼 Картинки вылезают
  • 🔠 Огромный заголовок
  • 🐜 Мелкий текст и кнопки
🧰

Три базовых правила

  1. <meta name="viewport" …> на каждой странице
  2. img { max-width: 100%; height: auto; }
  3. .container { max-width: …; padding: 0 16px; }

Решают половину проблем!

🩻

Кто вылезает за экран?

  • Рентген: * { outline: 1px solid red; }
  • Ищем width в px, большие картинки
  • Меняем на max-width или %
<div class="wide">Я шириной 600px и вылезаю!</div>
<div class="ok">А я max-width: 600px — помещаюсь</div>
* { outline: 2px solid red; }
body { font-family: sans-serif; }
.wide { width: 600px; background: #fab1a0; padding: 10px; }
.ok { max-width: 600px; background: #55efc4; padding: 10px; }
📱

Медиазапрос проекта

  • Шапка → в колонку
  • Меню → с переносом
  • Заголовок → меньше
  • Карточки → одна колонка

В конец style.css — работает на всех страницах.

<nav class="menu">
  <a href="#">Главная</a>
  <a href="#">Галерея</a>
  <a href="#">Факты</a>
  <a href="#">Контакты</a>
</nav>
<div class="grid"><div>1</div><div>2</div><div>3</div></div>
body { margin: 0; font-family: sans-serif; }
.menu { display: flex; gap: 12px; padding: 12px; background: #0984e3; }
.menu a { color: white; text-decoration: none; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 12px; }
.grid div { background: #74b9ff; padding: 24px; text-align: center; border-radius: 10px; }

@media (max-width: 600px) {
  .menu { flex-direction: column; gap: 6px; }
  .menu a { padding: 12px; background: rgba(255,255,255,.15); border-radius: 8px; }
  .grid { grid-template-columns: 1fr; }
}
👆

Удобно для пальцев

  • Кнопки ≥ 44px в высоту
  • Промежутки между ссылками
  • Текст ≥ 16px
  • На телефоне нет :hover!

Палец толще курсора мыши.

✅

Финальная проверка

  • 📏 360 · 768 · 1280px — все страницы
  • ↔️ Нет горизонтальной прокрутки
  • 👓 Читается без увеличения
  • 🍔 Меню удобно нажимать
  • 📱 Проверено на настоящем телефоне
🃏

Запомни!

  • <meta name="viewport" content="width=device-width, initial-scale=1">На каждой странице
  • @media (max-width: 600px)Стили для телефона
  • img { max-width: 100%; }Картинки не вылезают
  • flex-wrap: wrapПеренос пунктов
  • grid-template-columns: 1frОдна колонка
⌨️

Практика: Делаем мобильную версию

  1. Проверь все страницы на ширине 360px и запиши проблемы.
  2. Добавь meta viewport на каждую страницу.
  3. Напиши медиазапрос для шапки, меню и карточек.
  4. Убедись, что нет горизонтальной прокрутки.

🚀 Со звёздочкой: Сделай отдельную раскладку для планшета (от 601px до 900px) — 2 колонки.

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

🪞

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

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

✨ По желанию: Открой сайт на своём телефоне (или попроси родителей) и проверь каждую страницу.