Как реализовать такую масштабируемость?

Question

[Андрей Мартынкевич]

Подскажите как можно реализовать масштабируемость(не вручную все задавать) как на этом сайте(https://roll-group.sking.kz/). P.s Размер текста, паддинги и т.д. задан относительно ширины экрана.
Заранее благодарю.

Comments

[Вадим]

Уточните вопрос. Потому что Выглядит так, будто ответ содержится в вопросе.

Как реализовать

Размер текста, паддинги и т.д. задан относительно ширины экрана

[Андрей Мартынкевич]

Вадим, Как можно упростить процесс указания размеров? Потому что сидеть над каждым элементом с калькулятором будет очень долго.

[Ankhena]

Андрей Мартынкевич, зачем вам калькулятор?
Используйте препроцессор и простецкий миксин типа (scss)

@function vw($size) {
  @return #{(math.div($size, $layout-width)*100)}vw;
}

где $layout-width это ширина макета с которого вы берете размеры.

Либо поинтереснее, на выходе получается clamp

@function clampvw($min, $max) {
  @return clamp(#{$min}px,  #{(math.div($max, $layout-width)*100)}vw, #{$max}px);
}

[Андрей Мартынкевич]

Ankhena, Благодарю. Эти миксины я и искал

[Ankhena]

Андрей Мартынкевич, чего их искать-то? Два числа поделить?