Урок 32. Ошибки: Адаптивная, резиновая и отзывчивая вёрстка

📁 Раздел: Адаптивная вёрстка ⏱️ Время изучения: ~70 мин 🎯 Сложность: Средняя
#max-width #min #width #clamp #margin-inline

⚡ Кратко

Топ-3: брейкпоинты «под устройства» вместо «где ломается контент»; жёсткая ширина без max-width → горизонтальный скролл; чистый fluid без предела → нечитаемо длинные строки на большом экране.

Ошибка 1. Жёсткая ширина без ограничения

Самая частая причина горизонтального скролла на телефоне. Блок в 500px на экране 360px просто не помещается.

width: 500px → вылезает за «экран» 300px, появился скролл →
/* ❌ Как ломается */
.box { width: 500px; }

/* ✅ Как правильно: тянется, но не шире окна */
.box { width: 100%; max-width: 500px; }

Ошибка 2. Чистый fluid без верхнего предела

Текст на width: 100% без max-width на широком мониторе растягивается в одну строку через весь экран — читать неудобно. Оптимум — 45–75 символов в строке.

❌ Без предела: эта строка тянется на всю ширину контейнера и на большом экране станет слишком длинной для комфортного чтения.

✅ С max-width: 38ch строка ограничена по длине и читается легко.

/* ❌ строки слишком длинные */
.text { width: 100%; }

/* ✅ ограничиваем длину строки */
.text { width: 100%; max-width: 38ch; }

Остальные частые ошибки

  • Breakpoint по названию устройства. Лучше смотреть, где ломается конкретный блок, а не угадывать модель телефона.
  • Слишком много переопределений. Если CSS трудно читать, проверьте порядок media queries и выбранный подход: mobile-first или desktop-first.
  • Игнорирование пользовательских настроек. Для движения и темы учитывайте prefers-reduced-motion и prefers-color-scheme, когда это влияет на интерфейс.

Навигация