Какой опыт есть с разработкой адаптивной верстки

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

Умеете ли вы сделать интерфейс, который сам подстраивается под ширину, без отдельной мобильной версии и костылей. Node.js-разработчику это задают на фулстек-позициях, и следом часто уточняют: как решать адаптивность при серверном рендеринге, когда сервер не знает размер экрана.

Как отвечать

Покажите подход и подкрепите его проектом:

• mobile-first: базовые стили для узкого экрана, расширение через @media (min-width: ...). Точки перелома ставятся там, где ломается контент, а не под модели телефонов;
• Flexbox и Grid: Flexbox для одномерных рядов, Grid для двумерной сетки. grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) даёт адаптивную сетку карточек без медиазапросов;
• контейнерные запросы: @container поддерживают все основные браузеры, и компонент подстраивается под ширину своего места в макете, а не окна;
• медиа: srcset и sizes у картинок, <picture> для смены кадрирования, aspect-ratio, чтобы блок не прыгал при загрузке;
• касание: цели нажатия около 44 пикселей и никакой важной логики только на :hover.

Серверную часть проговорите отдельно, это ваша сильная сторона. При SSR на Next.js или Express сервер не знает ширины экрана, поэтому разную разметку по User-Agent лучше не рендерить: получите расхождение при гидратации и сломанный кэш. Адаптивность остаётся в CSS, а сервер помогает с картинками: ресайз через sharp или встроенная оптимизация изображений Next.js отдаёт каждому экрану файл нужного размера.

Про фреймворки говорите трезво: Bootstrap или Tailwind ускоряют работу, но интервьюер проверит, понимаете ли вы, что под ними. Приводите свои цифры, если они есть (вес страницы, оценка Lighthouse на мобильном), а если адаптив вы делали мало, так и скажите и опишите пет-проект.

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

Проверяют вёрстку только в режиме устройств DevTools. Настоящий Safari на iPhone ведёт себя иначе: панель адреса, безопасные зоны, масштаб при фокусе на поле.

Строят точки перелома под конкретные устройства: 375, 414, 768. Появляется новый экран, и макет снова ломается между ними.

Прячут на мобильном половину функций через display: none, хотя разметка и запросы по-прежнему грузятся.