Как использовать медиазапросы

Короткий ответ

Правила внутри @media работают, только когда условие выполняется. Меняйте ширину окна:

<style>
  .box { padding: 16px; background: lightcoral; color: white; }
  .box::after { content: "Narrow screen"; }
  @media (min-width: 500px) {
    .box { background: seagreen; }
    .box::after { content: "Wide screen"; }
  }
</style>
 
<div class="box"></div>

Сначала телефон

Пишите базовые стили для узкого экрана, а для широких добавляйте min-width. Так телефон получает меньше лишних правил, а каждая точка перелома только дополняет предыдущую:

.grid { display: grid; gap: 16px; }
@media (min-width: 600px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .grid { grid-template-columns: 1fr 1fr 1fr; } }

Диапазоны

Современная запись диапазона короче и понятнее пары min-width и max-width:

@media (400px <= width < 800px) { .sidebar { display: none; } }

Точки перелома выбирают по содержимому, а не по моделям телефонов: там, где раскладка начинает выглядеть плохо.

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

Медиазапросы на телефоне «не срабатывают», если на странице нет мета-тега viewport: браузер считает ширину около 980px и применяет стили для десктопа. Ещё одна ловушка — порядок: медиазапрос выше обычного правила с тем же селектором проиграет ему, потому что более позднее правило побеждает.