Сайт, который выглядит отлично на широком мониторе дизайнера, но разваливается на телефоне посетителя, теряет значительную часть аудитории — большинство переходов на обычные сайты сегодня происходит именно с мобильных устройств. Адаптивная вёрстка решает эту проблему через правила, которые меняются в зависимости от размера экрана.
Медиазапрос — это условие в CSS, которое применяет набор стилей только при выполнении определённого условия, чаще всего по ширине окна браузера. Синтаксис начинается с @media, дальше указывается условие вроде минимальной ширины, а внутри фигурных скобок — обычные CSS-правила, которые сработают только при этом условии.
Точки перелома, брейкпоинты, обычно выбирают не под конкретные модели телефонов, а там, где макет сам начинает выглядеть тесно или, наоборот, слишком разрежённо. Универсальных цифр, подходящих для любого дизайна, не существует — оптимальные брейкпоинты определяются содержимым конкретной страницы.
Обязательный элемент адаптивной страницы — метатег viewport в head документа. Без него мобильные браузеры по умолчанию отображают страницу в уменьшенном виде, как будто она рассчитана на десктопный экран, и пользователю приходится постоянно увеличивать масштаб вручную.
Помимо самих медиазапросов, современный CSS умеет обходиться без них во многих случаях — гибкие единицы, Grid с auto-fit и функция clamp позволяют элементам подстраиваться под ширину экрана плавно, без резких скачков на конкретных точках перелома.
Тестировать адаптивность стоит не только растягиванием окна браузера, но и через встроенный в инструменты разработчика режим эмуляции устройств — там можно быстро переключаться между популярными разрешениями экранов и проверять, как ведёт себя вёрстка на каждом из них.
Подробное руководство по медиазапросам и адаптивной вёрстке с примерами есть в разделе про медиазапросы на MDN.
