Теория — Урок 33

Главная идея

Media query применяет блок CSS только когда условие истинно. Чаще всего условие проверяет ширину окна браузера (viewport), но CSS умеет реагировать и на ориентацию устройства, системную тему и предпочтение уменьшенной анимации. Благодаря этому одна и та же разметка перестраивается под узкий телефон и под широкий монитор без дублирования HTML.

min-width удобно читать как «начиная с этой ширины и шире», а max-width — как «до этой ширины включительно». Смешивать подходы можно, но порядок правил должен быть предсказуемым: каскад применит то правило, которое стоит ниже при равной специфичности.

Брейкпоинты — как размеры одежды S / M / L / XL. Тело меняется плавно, но магазин не шьёт бесконечное число размеров: он переключает вас на следующий размер, когда вы переросли порог предыдущего. Точно так же макет «носит» одну раскладку до определённой ширины, а на пороге (брейкпоинте) переключается на следующую — например, с одной колонки на три. Размер подбирают под человека (контент), а не наоборот.

Шкала типовых брейкпоинтов

Это ориентиры, а не закон. Реальную точку перелома вы находите сами — там, где контенту становится тесно или, наоборот, появляется лишний простор.

Чем шире viewport, тем больше колонок и «воздуха» может позволить себе раскладка.

Как media query «перестраивает» раскладку

Базовый CSS описывает узкий случай (одна колонка). Затем media query добавляет правило, которое на широких экранах превращает её в несколько колонок:

📄 lesson-33/styles.css

/* базовая раскладка — одна колонка (узкий экран) */
.dashboard {
  display: grid;
  gap: 1rem;
}

/* начиная с 768px — три колонки */
@media (min-width: 48rem) {
  .dashboard {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* анимации — уважаем настройку пользователя */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms;
    scroll-behavior: auto;
  }
}

/* системная тёмная тема */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
}

48rem = 768px при стандартном размере шрифта 16px (48 × 16 = 768). Брейкпоинты в rem устойчивее к настройкам масштаба, чем в px.

min-width или max-width?

Это два зеркальных подхода к одному и тому же:

mobile-first — база описывает мобильный вид, а min-width добавляет усложнения для широких экранов. Так пишут чаще: телефон получает самый простой и лёгкий CSS. Подробно — в уроке 34.
desktop-first — база описывает десктоп, а max-width «упрощает» под узкие экраны. Иногда удобно при переделке старого десктопного сайта.

Глубже сравним оба подхода в уроках 34 (mobile-first) и 35. Здесь важно лишь понять разницу в направлении мышления.

Когда добавлять брейкпоинт

Не «потому что бывает планшет», а потому что контенту плохо: строка стала слишком длинной для чтения (более ~75 символов), карточки сжались до нечитаемого размера, появился горизонтальный скролл. Тяните окно браузера и ловите момент, где раскладка «ломается» — это и есть ваш брейкпоинт.

Частая ошибка

Подбор брейкпоинтов под конкретные модели устройств (iPhone, iPad…). Устройств тысячи, а размеры экранов меняются каждый год. Брейкпоинт должен следовать за поведением вашего контента, тогда сайт корректно работает на любом экране, а не только на тех, что вы проверили.

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