Адаптив и media queries

1. Зачем нужен адаптив

Один и тот же HTML показывается на телефоне, планшете и мониторе. Адаптивность — умение ломать сетку, менять размеры шрифта и скрывать лишнее в зависимости от ширины экрана. Голый принцип: mobile-first — начинаем с телефона, добавляем на больших.

• сначала минимальная версия (mobile) — строим вверх;
• потом min-width-перехваты для планшета и десктопа;
• отложенное (adaptive) — набор фиксированных макетов.

2. Стандартные брейкпоинты

Жёстких стандартных точек нет — точки выбирают под контент. Полезные стартовые: 480, 768, 1024, 1280. Гармоничнее ставить там, где ломается сетка, а не «в известных числах».

.grid { grid-template-columns: 1fr; }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, 1fr); } }

3. min-width и mobile-first

Mobile-first = базовые стили для маленького экрана, а каждый @media (min-width) ПРИБАВЛЯЕТ оформление к большим. Это отличается от старых @media (max-width), которые «ломали» десктопную версию вниз.

.menu__list { display: none; }               /* база: скрыто (мобильные) */
.burger { display: block; }

@media (min-width: 768px) {
  .menu__list { display: flex; }        /* включили горизонтальное меню */
  .burger { display: none; }
}

4. Логические операции в запросах

@media (min-width: 600px) and (max-width: 900px) { … }   /* И */
@media (max-width: 600px), (min-width: 1200px) { … }      /* ИЛИ */
@media not screen and (color) { … }                         /* отрицание */

• and — несколько условий сразу;
• запятая — логическое ИЛИ;
• not — отрицание (редко).

5. prefers-color-scheme

Тёмная/светлая тема по системной настройке пользователя. С переменными — один блок заменяет всю палитру.

:root {
  --bg: #ffffff; --text: #111827;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220; --text: #e5e7eb;
  }
}
body { background: var(--bg); color: var(--text); }

6. Другие media-функции

• prefers-reduced-motion — меньше анимаций (аксессуар a11y);
• orientation: portrait/landscape — книжная/альбомная;
• aspect-ratio и (ratio: 16/9) — соотношение сторон;
• hover: hover / none — есть ли мышь;
• (pointer: coarse) — тач-интерфейс.

@media (hover: hover) { .card:hover { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; } }

7. Адаптивные изображения через media

Использовать медиазапросы и для картинок: picture + source с media выбирает фото под экран. Более прослушанное — srcset/sizes (см. «Адаптивная графика»).

<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <source media="(max-width: 1200px)" srcset="medium.jpg">
  <img src="large.jpg" alt="Пейзаж">
</picture>

8. Скролл и большие экраны

• 1200px+ — контент «дышит», но строки текста не растягивайте бесконечно;
• для очень широких — центрированная колонка max-width;
• адаптивная сетка через repeat(auto-fit, minmax(240px, 1fr)) — лучший «динамический» грид;
• не гоняйте вертикальную менюшку на всех ширинах — на широком переключитесь на горизонтальную.

.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

9. Проверка адаптива

• viewport meta обязателен: width=device-width, initial-scale=1;
• DevTools → device toolbar — быстрые пресеты iPhone/Android;
• проверяйте не только ширину, но и кнопки без мыши;
• тесты реальных устройств (iOS Safari) важнее эмуляции.

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

10. Частые ошибки

11. Чек-лист адаптива

• viewport meta стоит;
• mobile-first: база тонкая, большие экраны — добавления;
• брейкпоинты под контент, а не «круглые цифры»;
• сонастройки prefers-* и hover: none проработаны;
• картинки адаптивны через picture/srcset;
• тест на реальных и узких экранах, не только DevTools.

Что дальше

Курс завершён.

← Вернуться к курсам