@media

Параметры

Параметр	Тип	Описание
min-width	length	Правила действуют, если окно не уже указанной ширины.
max-width	length	Правила действуют, если окно не шире указанной ширины.
prefers-color-scheme	light \| dark	Тема, выбранная в системе пользователя.
prefers-reduced-motion	reduce	Пользователь попросил уменьшить анимацию.
hover	hover \| none	Умеет ли основное устройство ввода наводить (мышь умеет, палец — нет).

Примеры

Одна колонка на узком экране, три — на широком:

<style>
  .cards { display: grid; gap: 8px; }
  .cards div { padding: 12px; background: lightskyblue; }
 
  @media (min-width: 500px) {
    .cards { grid-template-columns: repeat(3, 1fr); }
  }
</style>
 
<div class="cards"><div>1</div><div>2</div><div>3</div></div>

Тёмная тема по настройке системы:

<style>
  .theme { padding: 12px; background: white; color: black; }
 
  @media (prefers-color-scheme: dark) {
    .theme { background: #222; color: white; }
  }
</style>
 
<div class="theme">This block follows the system theme.</div>

Примечания

Сначала пишите стили для телефона, а в медиазапросах min-width дополняйте их для широких экранов — так кода получается меньше. Поддерживается и современная запись диапазонов: @media (width >= 600px). Чтобы подстраивать компонент под контейнер, а не под окно, используйте @container.

См. также

@container — Применяет правила в зависимости от размера контейнера, а не окна.
max-width — Максимальная ширина: элемент может быть уже, но не шире.
grid-template-areas — Рисует раскладку сетки картой именованных областей.
@supports — Применяет правила, только если браузер поддерживает указанное свойство, значение или селектор.

В учебнике

Медиазапросы — Адаптивная вёрстка с медиазапросами — тег viewport, правило @media, min-width и max-width, подход mobile first и перестройка каркаса.

Спасибо, что читаете!

Синтаксис