Правило @media: адаптивные стили

Как это работает

Медиазапрос применяет CSS только при выполнении условия. Частый пример — изменение числа колонок после определённой ширины. Базовые стили удобно писать для узкого экрана, а затем добавлять пространство и колонки через min-width.

Выбирайте точки переключения по содержимому, а не только по популярным моделям телефонов. Кроме ширины, media умеет учитывать печать и предпочтение уменьшенного движения. Адаптивность — это также перенос текста, удобные кнопки и отсутствие непреднамеренной горизонтальной прокрутки.

Пример в интерфейсе

.cards { display: grid; gap: 12px; }
.cards > div { padding: 20px; background: #eaf4ee; }
@media (min-width: 500px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

Значения и поведение

На что обратить внимание

Проверьте на практике

Плавно меняйте ширину окна. Найдите место, где карточкам тесно, и подберите порог по реальному содержимому.

Связанные темы: grid, width.