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

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

⚡ Кратко

Шпаргалка: @media (min-width: 48rem) { … } — стили от 768px и шире. max-width — до указанной. and — оба условия. Не-размерные: orientation, prefers-color-scheme, prefers-reduced-motion.

Справочник урока

ИнструментЗачем нуженМини-пример
@mediaУсловный блок CSS@media (min-width: 48rem) { ... }
min-widthПравила для ширины от указанной и выше@media (min-width: 64rem) { ... }
max-widthПравила для ширины до указанной@media (max-width: 47.99rem) { ... }
orientationРеакция на портретную или альбомную ориентацию@media (orientation: landscape) { ... }
prefers-reduced-motionУчитывает настройку уменьшения движения@media (prefers-reduced-motion: reduce) { ... }
prefers-color-schemeУчитывает системную светлую/тёмную тему@media (prefers-color-scheme: dark) { ... }

Типовые брейкпоинты (ориентиры)

УсловиеpxДля чего
min-width: 30rem480pxкрупный телефон / маленький планшет
min-width: 48rem768pxпланшет
min-width: 64rem1024pxноутбук
min-width: 80rem1280pxдесктоп / широкий монитор
Это ориентиры, а не закон: финальную точку перелома выбирают по контенту.

Шаблоны (patterns)

/* диапазон: только между 768px и 1024px */
@media (min-width: 48rem) and (max-width: 64rem) { ... }

/* несколько условий через запятую = ИЛИ */
@media (max-width: 30rem), (orientation: portrait) { ... }

/* ориентация */
@media (orientation: landscape) { ... }
Практическое правило: адаптивность начинается не с набора размеров устройств, а с поведения содержимого в доступной ширине.

Навигация