Варианты вёрстки подобного блока?

Question

[Andrey Vasilev]

Добрый вечер, вот такой блок:
нужно потом вкрутить адаптив, абсолютное позиционирование.. ну хз..

Comments

[Ankhena]

Блок с фоном и размерами в vw.
Текст абсолютом и размером шрифта в vw.
До некоторого уменьшения этого хватит.
Потом перестраивать во что-нибудь через media.

Answer 1

[Одиночка Айс]

Никогда не подумал бы, что пригодится - https://ru.stackoverflow.com/questions/716975/%d0%...

Answer 2

[Алексей Орлов]

А макет данного блока для мобильных устройств имеется? Достаточно интересно каким образном дизайнер уместил это в разрешение 320-480px.
Абсолютное позиционирование или отрицательные отступы , вижу только такое решение.

Comments

[Andrey Vasilev]

мобильного макета нет, за верстку получу копейки

[Алексей Орлов]

Andrey Vasilev, тогда, как вариант, сделать абсолютным позиционированием для ПК, а для мобильных и прочих устройств заменить это всё просто на пункты в столбец (в таких же кружочках) и лучше заказчику обьяснить, почему сильно затруднительно уместить такой блок на мобильных устройствах.

[Andrey Vasilev]

Алексей Орлов, да, тоже так подумал. что-нибудь придумаю на мобилки

Answer 3

[Тарас Шульга]

Немного оффтопа

Обожаю такие вещи от дизайнеров. Типа он такой это накалякал на коленке за 10 минут. А потом заказчик - ты учти макет мне нужен с упором до 320px!!! И ты такой, хммм ок, а как дизайнер вот это видит на мобильных экранах? А он никак не видит, он уже получил свои мани и теперь с собаками его не найдешь. Но вы, что-то придумайте вы же профи!!

А по теме тут несколько способов реализации.
Самый первый самый ленивый, наглый и даже тупой - все фигануть фоном - лол (как говориться каков бюджет такой и креатив)
Второй уже более адекватный и гуманный это через позиционирование/трасформ + использовать относительные величины (% и vw/vh) ну а на приближенному к мобилкам уже оформить, что-то типа списк.

Answer 4

[Дмитрий Киреев]

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

Comments

[Тарас Шульга]

Ну это было что-то из разряда сарказма(шутки) А вообще если взял - то нужно делать на совесть.