Урок 35. Ошибки: Desktop-first подход

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

⚡ Кратко

Главная ловушка desktop-first — фиксированная пиксельная ширина в базе: на узком экране блок вылезает и даёт горизонтальный скролл. Ещё частые промахи: breakpoint «по названию телефона», гора переопределений и игнор пользовательских настроек.

Главная ошибка: фиксированная ширина даёт скролл

Десктопная база с жёсткой width: 1180px не помещается в узкое окно. Медиазапрос max-width вы добавили, но колонки и пиксельная ширина остались — появляется горизонтальная прокрутка.

❌ как ломается: блок шире окна → ↔ скролл
width: 1180px — не помещается
✅ как правильно: гибкая ширина, помещается всегда
max-width: 100% — всегда в окне
/* ❌ так появляется горизонтальный скролл */
.admin-layout { width: 1180px; }

/* ✅ гибкая база — блок не вылезает за окно */
.admin-layout {
  max-width: 100%;
  /* колонки через minmax()/fr, а не пиксели */
  grid-template-columns: minmax(0, 1fr);
}

Другие частые ошибки

  • Breakpoint по названию устройства. Лучше смотреть, где ломается конкретный блок, а не угадывать модель телефона — линейка устройств меняется, а содержимое нет.
  • Забыли сбросить, а не только добавить. В desktop-first внутри max-width нужно убирать лишнее (колонки, fixed widths, большие отступы, hover-поведение), а не дописывать поверх.
  • Слишком много переопределений. Если CSS трудно читать, проверьте порядок media queries и сам подход: возможно, компонент проще переписать mobile-first.
  • Перепутан порядок breakpoint. В desktop-first их пишут от большего к меньшему; обратный порядок ломает каскад, и более узкое правило перекрывается широким.
  • Игнор пользовательских настроек. Где это влияет на интерфейс, учитывайте prefers-reduced-motion и prefers-color-scheme.

Навигация