Какие типичные ошибки встречаются при адаптивной верстке?

Основные ошибки адаптивной верстки:

1. Некорректные медиазапросы

   • Отсутствие или неправильные breakpoints.
   • Неучет ориентации устройства (orientation: portrait/landscape).

2. Проблемы с контейнерами и сетками

   • Элементы выходят за границы viewport (отсутствие overflow: hidden или max-width: 100%).
   • Использование фиксированных размеров (px) вместо относительных (%, rem, vw/vh).
   • "Ломающаяся" структура Flexbox/Grid при сжатии.

3. Неадаптивный контент

   • Изображения без max-width: 100% и height: auto растягиваются или обрезаются.
   • Мелкие, нечитаемые шрифты на мобильных (отсутствие @media для font-size).
   • Touch-элементы (кнопки, ссылки) меньше рекомендуемых 44x44px.

4. Производительность на мобильных

   • Неоптимизированные тяжелые изображения для всех разрешений.
   • Блокирующие рендеринг скрипты и стили для мобильных устройств.

Пример корректного медиазапроса:

/* Базовые стили для мобильных (Mobile First) */
.container {
  padding: 1rem;
  width: 100%;
}

/* Стили для планшетов */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
    margin: 0 auto;
  }
}

/* Стили для десктопов */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

Как проверять: Используйте инструменты разработчика браузера (Device Toolbar), эмуляторы и тестирование на реальных устройствах.