Урок 33. Ошибки: Media queries: min/max-width, ориентация и prefers-*

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

⚡ Кратко

Топ-3: брейкпоинт под модель устройства; фиксированная ширина → горизонтальный скролл; забыли <meta viewport> — медиазапросы «не работают» на телефоне.

Ошибка 1. Фиксированная ширина → горизонтальный скролл

Самая частая. width: 600px не помещается в узкий экран — появляется прокрутка вбок, и media query не спасает.

❌ Как ломается (на узком экране блок шире контейнера):

width: 600px — не влезает, контейнер прокручивается вбок → 
.card { width: 600px; }   /* ломает узкие экраны */

✅ Как правильно (блок сжимается до контейнера):

max-width: 600px — не шире контейнера, на узком экране сжимается 
.card { max-width: 600px; width: 100%; }

Ошибка 2. Брейкпоинт по названию устройства

Подбирать точку перелома под «iPhone» или «iPad» бессмысленно: устройств тысячи, размеры меняются ежегодно. Смотрите, где ломается ваш блок, и ставьте брейкпоинт туда.

Признак проблемы: в CSS комментарии вида /* iPhone 12 */, /* iPad */. Замените их на «почему»: /* строка стала длиннее 75 символов */.

Ошибка 3. Забыли meta viewport

Без этого тега мобильный браузер «притворяется» широким (~980px) и масштабирует страницу — media queries по ширине будто не срабатывают.

📄 index.html (внутри <head>)
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ещё ошибки

  • Перекрывающиеся диапазоны. max-width: 768px и min-width: 768px оба истинны ровно на 768px — на границе сработает то правило, что стоит ниже. Делайте диапазоны без пересечения (напр. max-width: 767.98px).
  • Слишком много переопределений. Если CSS трудно читать — смешаны mobile-first и desktop-first. Выберите один подход и придерживайтесь его.
  • Игнор пользовательских настроек. Учитывайте prefers-reduced-motion и prefers-color-scheme, когда они влияют на интерфейс.

Навигация