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

Question

[Денис]

Добрый день. У меня не получается сделать данны блок адаптивным а точнее наверное резиновым.

https://codepen.io/fristyr/pen/KYvBZZ

Сам он должен выглядеть вот так https://monosnap.com/file/mI120MDc52t0xBP0uClInxnw...

Я все по своему небольшому опыту перепробовал но так скажем контент не сжимается пропорционально, чтобы все было пропорционально и по центру.
Моя идея в том чтобы до брекпоинта в 800-900 пикселей все было пропорционально макету точнее картинке ссылку на которую я оставил.

Есть у кого идеи или советы?

Comments

[Rustam Bainazarov]

Пропорциональное изменение размера ≠ адаптивность. Если нужно именно пропорциональное изменение размера (чтобы вписывался в экран), используйте viewport-единицы для всего внутри блока (включая шрифты). В данном случае всё должно плясать от vw.

Либо придумывайте нормальную адаптивность.

[Денис]

Рустам Байназаров, тоесть самим шрифтам тоже vw задавать?

[Rustam Bainazarov]

Денис, да, font-size в vw.

[Денис]

Рустам Байназаров, Вроде как получилось спасибо, но правильный ли такой подход? Очень редко вижу использование vw. Классная штука, почему ее тогда не используют, или используют но не так часто? В основном это % em rem

[Rustam Bainazarov]

Денис, проценты — относитель родительского блока. Viewport-единицы — относительно viewport'a.

В таком контексте их не используют, ибо это не адаптивность.