Урок 11. Старый vs Новый: медиазапросы против приставок

❌ Отдельные медиазапросы

.cards { display: grid; grid-template-columns: 1fr; gap: 16px; }

@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}

Чтобы понять поведение блока, нужно проверить три места в файле. При удалении блока медиазапросы обычно остаются жить.

❌ Отрезаем лишнее

.sidebar { width: 280px; }
@media (max-width: 1024px) { .sidebar { display: none; } }