Загрузка...

Media queries в CSS

Урок по адаптивному дизайну задал установку: одно HTML-дерево, viewport meta, гибкая оболочка, относительные единицы. Media queries — это переключатель: блоки CSS, которые включаются только когда условие срабатывает (обычно ширина viewport). Здесь — синтаксис и спокойные привычки; адаптивные изображения и Breakpoints углубят набор дальше.

Набор инструментов media query

📊 Media queries одним взглядом

Элемент Повседневная роль
@media Открывает условный блок CSS
Медиа-признак (min-width, max-width, …) Проверка, которую оценивает браузер
and Требует совпадения всех перечисленных признаков
Запросы через запятую Логическое или — достаточно любого совпавшего списка
Набор правил внутри { } Стили, пока условие выполняется
Тип носителя (screen, print) Необязательный фильтр среды вывода

Без запросов каждое правило «всегда включено». С ними вы сохраняете крепкую базу (из прошлого урока) и накладываете изменения слой за слоем — шире колонки, крупнее шрифт, другая навигация — только когда viewport это выдержит.

Анатомия @media

Классический шаблон: признак в скобках, затем блок фигурных скобок с обычными объявлениями. Для ширин по возможности берите rem или em — они лучше масштабируются с корневыми/типографскими настройками, чем жёсткие списки пикселей устройств.

Простой media query с min-width

css 
.nav {
display: block;
}

@media (min-width: 48rem) {
.nav {
display: flex;
gap: 1rem;
}
}

Mobile-first с min-width

Узкую вёрстку пишите в базовой таблице стилей. Через @media (min-width: …) добавляйте улучшения по мере роста viewport. Каждый шаг меняет один ясный слой — отступы, колонки или навигацию — а не переписывает всю страницу на каждом пороге.

Улучшение mobile-first

css 
.hero {
padding: 1rem;
font-size: 1.125rem;
}

@media (min-width: 40rem) {
.hero {
padding: 2rem;
font-size: 1.25rem;
}
}

@media (min-width: 64rem) {
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}

Desktop-first с max-width

Если база — широкая вёрстка, @media (max-width: …) сжимает стили ниже порога: колонки в столбик, меньше padding, проще chrome. Внутри проекта будьте последовательны: не прыгайте без причины между чистыми стеками min-width и max-width.

Сжатие desktop-first

css 
.sidebar {
width: 16rem;
float: left;
}

@media (max-width: 50rem) {
.sidebar {
width: 100%;
float: none;
}
}

Сочетание признаков через and

Связывайте признаки так, чтобы совпали все. Удобно для диапазонов (min и max вместе) или пары ширины с другим признаком. Запятая между целыми списками @media означает или.

Диапазон с and

css 
.card-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}

@media (min-width: 40rem) and (max-width: 63.99rem) {
.card-grid {
grid-template-columns: 1fr 1fr;
}
}

Дальше ширины — печать (и спокойные дополнения)

Ширина — повседневный инструмент. Типы вроде print прячут chrome для бумаги. Предпочтения (например prefers-reduced-motion) — полировка доступности; здесь используйте скупо. Урок Breakpoints упорядочит стратегию, а доступность позже разберёт движение.

Простые стили печати

css 
@media print {
.site-nav,
.ad-slot {
display: none;
}

body {
color: #000;
background: #fff;
}
}

Спокойная привычка к breakpoints

Выберите короткий список именованных ширин под ваши точки напряжения макета — не под каждую модель телефона. Задокументируйте их (например «навигация сворачивается ниже 48rem»). Гибкая база + немного запросов лучше леса разовых правил под устройства. Дальше — изображения и более полный план breakpoints.

Попробуйте сами

  1. Возьмите сложенную навигацию и добавьте один @media (min-width: …), который переводит её в flex.
  2. Перепишите ту же идею сжатием desktop-first через max-width — заметьте разницу в базовых стилях.
  3. Добавьте диапазонный запрос с min-width и max-width только для двухколоночной полосы.
  4. Скройте декоративный баннер через @media print.
  5. Напишите три именованных breakpoint для учебной страницы — список коротким.

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

  • Отдельный запрос на каждый бренд устройства вместо точек напряжения макета
  • Забытая закрывающая }, из‑за чего дальнейший CSS «пропадает» внутри запроса
  • Случайное смешивание стеков min-width и max-width, пока cascade не воюет сам с собой
  • Опора только на запросы с игнором гибких контейнеров и относительных единиц из адаптивного дизайна
  • Свалка длинного каталога breakpoints здесь — ремесло продолжается в Breakpoints; изображения — в адаптивных изображениях

Итог

  • Media queries оборачивают CSS так, что он действует только при совпадении условий
  • min-width усиливает вверх (mobile-first); max-width сжимает вниз (desktop-first)
  • and требует все признаки; запятые между запросами работают как или
  • Держите мало именованных breakpoints, привязанных к реальной вёрстке
  • Дальше: адаптивные изображения — медиа, которое масштабируется, не ломая колонку

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
8
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 55 из 61
Css Урок