Как правильно сверстать такой блок?

Question

[sasha761]

Подскажите пожалуйста направление в каком двигаться что б сверстать правильно , адаптивно ( до 768px ).
Первая картинка в разрешении 1920


Вторая картинка в разрешении 768


Кривую линию взял как background-image а остальные блоки спозиционировал абсолютом, но при сужении экрана все идет не так как надо (

Answer 1

[Smeecy Smeecy]

Сделай полностью картинкой и не парься)

Comments

[sasha761]

да такой себе вариант )
Самый худший и самый крайний я б сказал )

[Smeecy Smeecy]

sasha761, ну тогда, медиазапросы, их не так много должно быть)

[Rustam Bainazarov]

sasha761, либо SVG с пересчётом координат опорных точек в зависимости от положения текстовых блоков. На JS, конечно.

[sasha761]

Рустам Байназаров, а можете скинуть какой-то мануал что б я хоть в тему вник как это сделать

[Сергей Герасимов]

sasha761, посмотрите у Бутстрап 4 есть popover, его можно адаптировать под вашу задачу

[Александр Суханов]

Не делайте контейнер резиновым. чтобы при сужении экрана не сужалось ничего, а заменялось в нужный момент на новые абсолюты и при необходимости, на новый background-image

[sasha761]

Сергей Герасимов, честно не понимаю как вы нашли связь между popover'ром и моей задачей )

[sasha761]

Александр Суханов, тогда получиться очень много media вот прям очень много , потому что крайний блок текстовый находиться почти у границы страницы

[Smeecy Smeecy]

sasha761, например если сетка bootstrap , то получится 1 основное разрешение и 2 медиазапроса, т.к. ширина контейнеров будет равна 1140 , 960 и 720, соответственно изображение будет меняться лишь 3 раза.

Answer 2

[ksnk]

А что сделать-то надо ? Если полностью резиновый дизайн - то для начала - сделать полностью "резиновую" кривую, с возможностью получить реперные координаты блоков. Лучше такую кривую делать на svg, так как при расширяемой картинке будет меняться ширина линии. Само решение для линии может выглядет так - по window.resize, через маленький интервал времени перерисовываем кривую на svg и вставляем ее в бякграунд.
Для блоков с текстом все страшнее - нужно расставлять блоки не точно в реперные точки, а так, чтобы блоки не налезали друг на друга. Если сам текстовый блок будет не такой, как кажется дизайнеру, а такой как хочется владельцу сайта, то придется освоить ремесло плиточника ;)
Как простой вариант - ставить текстовые блоки с репером в левом-верхнем углу, а если выходит за рамки - то правым или нижним... на том же window.resize

Comments

[sasha761]

я такое не реализовывал еще по этому то что вы написали мне мало о чем говорит ахах.
а могли бы вы подсказать как загуглить к примеру что б наткнуться на реализацию похожих примеров.
Спасибо!