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

💡 Объяснение

Проверка на телефоне

Сегодня мы превращаем свой проект в адаптивный сайт. Мы уже знаем инструменты (занятие 22), теперь применяем их к настоящему многостраничному проекту. Работаем как тестировщики: сначала ищем проблемы, записываем их, потом исправляем по одной.

Шаг 1. Ищем проблемы

Открой свой сайт, нажми F12 → значок телефона (Ctrl+Shift+M) и выбери ширину 360px. Пройди по всем страницам сверху вниз и запиши, что не так. Типичный список проблем:

• Горизонтальная прокрутка — страницу можно сдвинуть вбок. Виноват элемент шире экрана.
• Меню не помещается — пункты налезают или уходят за край.
• Карточки сжаты в узкие полоски.
• Картинки вылезают за экран.
• Заголовок огромный — одно слово на строку.
• Текст мелкий, кнопки крошечные — не попасть пальцем.
• Большие отступы съедают полэкрана.

Шаг 2. Базовые правила (если ещё нет)

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

— на каждой странице! А в CSS:

* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
.container { max-width: 1000px; margin: 0 auto; padding: 0 16px; }

Эти три правила сами решают половину проблем.

Шаг 3. Как найти виновника горизонтальной прокрутки

1. Временно добавь * { outline: 1px solid red; } — сразу видно, какой блок вылезает за правый край.
2. Ищи фиксированные ширины: width: 800px, min-width, большие картинки, длинные слова и ссылки.
3. Замени width на max-width или проценты.

Шаг 4. Медиазапрос для проекта

@media (max-width: 600px) {
  .header {
    flex-direction: column;
    gap: 8px;
  }
  .menu {
    flex-wrap: wrap;
    justify-content: center;
  }
  .hero h1 {
    font-size: 1.8rem;
  }
  .cards {
    grid-template-columns: 1fr;
  }
  section {
    padding: 24px 0;
  }
}

Пиши в медиазапрос только то, что нужно изменить. Помести его в конец style.css — тогда он будет общим для всех страниц.

Меню на телефоне

Варианты от простого к сложному:

• пункты переносятся на новую строку: flex-wrap: wrap;
• пункты в колонку: flex-direction: column, каждый — крупная кнопка;
• для сильных: раскрывающееся меню на <details> и <summary> со значком ☰.

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

• Кнопки и ссылки меню — высотой не меньше 44px (добавь padding).
• Между соседними ссылками — промежуток, чтобы не промахнуться.
• Основной текст — не меньше 16px.
• Помни: на телефоне нет :hover. Важная информация не должна появляться только при наведении.

Планшет (для сильных)

@media (min-width: 601px) and (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

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

• Ширины 360px, 768px и 1280px — на всех страницах.
• Нет горизонтальной прокрутки.
• Всё читается без увеличения.
• Меню работает и по нему удобно нажимать.
• Если можешь — открой сайт на настоящем телефоне.

Частые ошибки

• viewport добавлен только на главную.
• Медиазапрос в начале файла — его перебивают правила ниже.
• Незакрытая фигурная скобка медиазапроса ломает весь CSS после неё.
• На телефоне скрыли важную информацию через display: none.

Проверь себя

1. Какие три базовых правила решают половину проблем адаптивности?
2. Как найти элемент, из-за которого появилась горизонтальная прокрутка?
3. Почему на телефоне нельзя полагаться на :hover?