Всем добрый вечер!
Столкнулся с такой ситуацией:
по макету для десктопа и для мобильной версии расположение элементов сильно отличается. И когда смотришь на оба варианта, возникает ощущение, что под каждый нужно делать отдельный HTML-скелет.
Моя первая идея:
Сначала сверстать десктопную версию, а затем — отдельный скелет под мобильную, и при достижении определённой ширины:
отключать десктопную версию
включать мобильную
Но это решение кажется мне некрасивым и слишком «колхозным», ведь так можно напороться на дублирование и запутанную поддержку.
Ключевые отличия макета:
Верхняя менюшка (молочного цвета)
На десктопе: "Доставка", "Оплата", "Контакты" находятся в самом конце блока
На мобильной: эти ссылки уже перемещены вниз
Блок выбора языка
На десктопе: находится внизу блока
На мобильной: поднимается вверх
☎️ Номер телефона и геолокация
На десктопе: видны сразу
На мобильной: прячутся в раскрывающееся бургер-меню
Логотип
На десктопе: находится слева
На мобильной: по центру
Ну на картинах это будет видно
Как красиво и грамотно реализовать такую адаптивность без создания двух разных HTML-структур?
Я не прошу полного кода, достаточно:
маленького примера
или ссылки на хорошее видео, где объясняется похожая адаптивная реализация.
Заранее спасибо!
Простой
