Как адаптируете вот такие элементы?

Question

[Валентин Попов]

Вопрос гуру верстальщикам.
Дизайнер отрисовал социальные иконки на десктопе и мобиле.


По моему мнению он не зная основ верстки отрисовал иконки на мобиле не правильно, так как мне придется дублировать элементы. Т.е на десктопе делать список с социальными иконками и на мобиле их скрывать, а на мобиле делать еще один список с социальными иконками и на десктопе их скрывать.
Как бы вы решили эту задачу без дублирования элемента? и согласны со мной что дизайнер отрисовал этот блок не правильно.

Comments

[вовчек]

Такое можно сделать, но будут лишние блоки, и к каждому прописывать display flex чтобы элементы встали правильно. По поводу макета ничего не могу сказать, но я бы по другому немного сделал, чтобы не мучить верстальщика :)

[code2003]

Я конечно может и заблуждаюсь, но не вижу проблемы такое реализовать.
Ввиду того что на десктопе и мобиле структура футера не меняется.
Разница лишь в расстояниях и доп элементах:
На десктопе(подписи к иконкам + отсутствие логотипа)
На мобиле(Логотип + отсутствие подписей)
Все должно решаться через media . Да и нужны flex, скорее и вложенные.

[Валентин Попов]

code2003, я не вижу проблем реализовать это. Но хотелось бы что бы дизайнер отрисовал так, чтобы не прибегать к дублированию разметки и лишних оборачивающих блоков. Ведь это все загружает DOM. Нужно по минимуму избегать оберток и дублирование, но тут дизайнер не оставляет другого выбора.

[Дмитрий Кузнецов]

Валентин Попов,

Ведь это все загружает DOM

У вас код в 1кк блоков? Браузеры, телефоны, компьютеры давно уже справляются с большим количеством блоков, практически не влияя на производительность. То, что вы обернёте в несколько доп. блоков - почти ни как не скажется на производительности. Я считаю, что не стоит из-за этого заморачиваться.

[V Sh.]

Валентин Попов, какие лишние блоки вы видите? Логотип у вас будет в любом случае (скрыт на десктопе, показан в мобилке), надписи у вас будут минимум в span элементе (по нему и показывать/скрывать). Стилизацию списка также провести через media-запрос. В чем сложность-то? Может, я что-то упускаю?