Различие скелета в пк версии и телефонной, как лучше всего делать такие вещи?

Question

[Рамазан Ахриев]

Столкнулся с такой ситуацией:
по макету для десктопа и для мобильной версии расположение элементов сильно отличается. И когда смотришь на оба варианта, возникает ощущение, что под каждый нужно делать отдельный HTML-скелет.

Моя первая идея:
Сначала сверстать десктопную версию, а затем — отдельный скелет под мобильную, и при достижении определённой ширины:

отключать десктопную версию

включать мобильную

Но это решение кажется мне некрасивым и слишком «колхозным», ведь так можно напороться на дублирование и запутанную поддержку.

Ключевые отличия макета:
Верхняя менюшка (молочного цвета)

На десктопе: "Доставка", "Оплата", "Контакты" находятся в самом конце блока

На мобильной: эти ссылки уже перемещены вниз

Блок выбора языка

На десктопе: находится внизу блока

На мобильной: поднимается вверх

☎️ Номер телефона и геолокация

На десктопе: видны сразу

На мобильной: прячутся в раскрывающееся бургер-меню

Логотип

На десктопе: находится слева

На мобильной: по центру

Ну на картинах это будет видно

Как красиво и грамотно реализовать такую адаптивность без создания двух разных HTML-структур?
Я не прошу полного кода, достаточно:
маленького примера
или ссылки на хорошее видео, где объясняется похожая адаптивная реализация. Заранее спасибо!

Comments

[Ankhena]

Я не прошу полного кода, достаточно:

Так вот, достаточно:
display grid
display contents

[Рамазан Ахриев]

Ankhena,
Все это через grid? Именно верхняя менюшка?

[Ankhena]

Рамазан Ахриев, как угодно, вариантов больше, чем один.

Отставьте панику и внимательно посмотрите какие блоки с кем компонуются и куда переезжают.
Потом подумайте как оно всё должно вести себя при переполнениях и не нужно ли что-то скорректировать в первоначальном плане.

[Рамазан Ахриев]

Ну там расстановка, прям отличается. Ладно крч подумаю

[Ankhena]

Рамазан Ахриев, гриды умеют менять расстановку как угодно

Answer 1

[Николай Жарков]

https://doka.guide/css/media/

на определённых диапазонах ширины экрана можно в css управлять отображением блоков

Answer 2

[ImagineTables]

1. «по макету для десктопа и для мобильной версии расположение элементов сильно отличается» — подумайте, правильный ли это макет. (Или, скорее, правильная ли трактовка макета вами). Расположение элементов обычно ставят в зависимость от ширины экрана (при помощи media queries), а уже через неё — возникает разница между десктопом и мобилой.

Если хочется сделать радикальное упрощение для мобил, сайт обычно пакуют в приложение вместе с webview.

2. «Сначала сверстать десктопную версию, а затем — отдельный скелет под мобильную» — я бы так делать не стал. Более того, для меня это хороший критерий, чтобы понять, правильно или нет устроен «скелет». Если вы не можете один и тот же «скелет» по-разному представить для разных условий, значит структура недостаточно изолирована от отображения.

Чтобы этого избежать, меньше пользуйтесь утилитами (классами типа w-100, d-none и т.д.), размечайте маркап семантически (классами типа «меню для юзера», «карточка того-то», «панель сего-то»), не вводите атрибуты для контроля за отображением, а отображение настраивайте строго через CSS.