Какие методы адаптивной верстки существуют кроме медиа-стилей

Что проверяют

Знаете ли вы современный CSS, в котором большая часть адаптива делается без @media. Следом обычно спрашивают про контейнерные запросы: чем они отличаются от медиазапросов и когда без них не обойтись.

Как отвечать

Сгруппируйте инструменты по задачам:

• гибкая раскладка: Flexbox с flex-wrap и flex-basis сам переносит элементы на новую строку. Grid с repeat(auto-fit, minmax(16rem, 1fr)) меняет число колонок под ширину без единого брейкпоинта;
• контейнерные запросы: container-type: inline-size на обёртке и @container (min-width: 30rem) внутри. Компонент подстраивается под выделенное ему место, а не под экран, поэтому одна карточка корректно выглядит и в сайдбаре, и в основной колонке. Работают во всех актуальных браузерах;
• математика в CSS: min(), max(), clamp(). Например, font-size: clamp(1rem, 0.9rem + 1vw, 1.5rem) даёт плавную типографику, а width: min(100%, 60rem) заменяет связку max-width и медиазапроса;
• единицы: rem для размеров, связанных с настройкой шрифта пользователя, % и fr для долей, dvh и svh вместо 100vh на мобильных;
• медиа: srcset и sizes для выбора картинки по плотности и ширине, <picture> для смены кадрирования, aspect-ratio и object-fit против прыжков вёрстки;
• JavaScript: ResizeObserver или matchMedia, когда от размера зависит логика, а не стили.

Без мета-тега viewport с width=device-width на телефоне не заработает ничего из перечисленного. Mobile first и прогрессивное улучшение тоже можно назвать, но это порядок работы, а не отдельные техники.

Где спотыкаются

Задают шрифт только в vw. Такой текст не растёт при масштабировании страницы, это нарушение доступности. Решение: clamp() с rem в формуле.

Пишут height: 100vh для первого экрана на мобильных. Панель адреса съедает часть высоты, и низ блока уходит под неё, для этого и появились dvh и svh.

Слушают resize на window и переключают классы из JavaScript. Это лишняя работа на каждом кадре и мигание до гидратации, а та же задача решается контейнерным запросом.