Для настройки адаптации макета для десктопа и мобильных устройств рекомендуется следующее:

1. Исследовать целевую аудиторию. 1 Нужно определить, какими устройствами чаще всего пользуются потенциальные и действующие клиенты. 1 Это поможет понять, на какой версии ресурса сосредоточиться — мобильной или десктопной. 1
2. Определить иерархию контента. 1 Нужно решить, что следует оставить на главном экране, а какие элементы — скрыть в гамбургер-меню. 1
3. Использовать медиазапросы. 1 Они позволяют использовать разные CSS-стили в зависимости от конкретных характеристик устройства, на котором отображается ресурс. 1 Например, один стиль выбирается для гаджетов с экраном более 600 пикселей (десктопная версия), а другой — для дисплеев с разрешением менее 600 пикселей (мобильная версия). 1
4. Перенести элементы с десктопной версии на макет с нужным разрешением и пропорционально их уменьшить. 2 Пункты меню и фильтры можно скрыть под кнопками. 2
5. Проверить адаптированные элементы в режиме предпросмотра. 2 В него можно попасть через кнопку в верхнем правом углу экрана. 2 Если какие-то элементы не помещаются на экран или выглядят несоразмерными интерфейсу, в режиме предпросмотра это можно заметить. 2

Для настройки адаптивной вёрстки можно использовать графический редактор Figma, в котором предусмотрены шаблоны для разных разрешений экранов. 2

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