Мобильная адаптация

Пишите CSS так, будто страница всегда телефон. Базовые размеры, отступы и сетка живут без медиазапроса. Когда ширины становится больше, вы добавляете правила через min-width. Узкий экран вы не «чините» в конце: он уже был правильным.

Зачем так, а не наоборот

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

Общий набор порогов (это не бренд, просто частые числа): 640, 768, 1024. Можно в px или в rem (1rem = 16px при корне 100%). Главное: одна единица во всех запросах, иначе порядок ломается.

Таблица ниже - пример порогов из документации Tailwind CSS, не авторская лекция. Цифры и формулировки смотрите на исходной странице.

Источник: Responsive design, Tailwind CSS. Там же соседняя тема max-width. Вместо 96rem (1536px) в учебном макете иногда берут 90rem (1440px).

Телефону нужен viewport, иначе он рисует «десктоп в лупу»:

<meta name="viewport" content="width=device-width, initial-scale=1" />

База, потом пороги

.cards {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
 
@media (min-width: 640px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}
 
@media (min-width: 768px) {
  .cards {
    gap: 16px;
  }
}
 
@media (min-width: 1024px) {
  .cards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

На 390px работает только первый блок. На 700px уже база и 640. На 1100px все четыре. Правило на 1024 не выключает 640: колонок три, потому что оно позже и конкретнее по каскаду.

Не пишите «только для мобильного» через min-width: 640px. Этот запрос как раз не про узкий экран.

Живая ширина

Тяните край макета или ползунок до конца шкалы. Макет меняет ширину, без scale. Карточки магазина: minmax(0, 1fr), длинный артикул не стопорит ресайз. Подсветка кода: какой фрагмент сейчас действует.

Высоту экрана (vh / viewport height, svh / small viewport height) смотрите в единицах. Ряды и fr (fraction) - в Grid.