Адаптивная страница: от телефона до большого экрана

Дайте браузеру правильный viewport

В head должна быть настройка width=device-width, initial-scale=1. Без неё мобильный браузер может использовать виртуальную широкую область, из-за чего медиазапросы и масштаб выглядят не так, как ожидается. Не запрещайте пользователю увеличивать страницу.

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

Начните с одной колонки

На узком экране карточки удобно поставить друг под другом. Затем добавьте вторую или третью колонку, когда содержимое помещается без тесноты. Точку переключения выбирайте по реальному тексту и кнопкам, а не по названию устройства.

.cards { display: grid; gap: 16px; }
@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
img { max-width: 100%; height: auto; }

Найдите источники переполнения

Частые причины горизонтальной прокрутки — фиксированная ширина, длинный URL, таблица или padding сверх 100% ширины. Для текста применяйте подходящий перенос, для кода и таблиц — отдельную прокручиваемую область. Не скрывайте overflow всего body как универсальное исправление: это может просто отрезать содержимое.

Во Flexbox ребёнку с длинным текстом иногда нужен min-width: 0. В Grid помогает minmax(0, 1fr). Понимание минимального размера лучше случайного уменьшения шрифта.

Проверьте несколько сценариев

• Узкий экран около 360 CSS-пикселей.
• Промежуточная ширина, где меняется число колонок.
• Широкий экран: длина строк остаётся удобной.
• Масштаб 200%: текст не перекрывает кнопки.
• Навигация клавиатурой: фокус виден и не обрезан.

Следующий урок — файлы, изображения и пути. Полезная справка: Grid и @media.