Как сделать mixin меняющий размер круга при уменьшении экрана?

Question

[sofer233]

Уважаемые знатоки, хочу адоптировать свою работу над проектом и сделать mixin который будет высчитывать размер круга в зависимости от размера экрана по примеру
@include circle-size (200, 100) ;
Где 200px - это высота и ширина круга на размере экрана 1920px a 100px, размер на экране 320px.
если с шириной я разобрался

@mixin adaptiv($pcSize, $mobSize) {
 $addSize: $pcSize - $mobSize;
 $maxWidth: $maxWidth - 320;
 width: calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth}));
}

То вот с высотой возникли проблемы, не понимаю как это сделать и объединить в один mixin, может кто-то знает как это можно реализовать ?

Comments

[Ankhena]

https://codepen.io/AnnaSummer/pen/PoRjdwo

За пропорции блока отвечает свойство aspect-ratio. Если поддержка недостаточна, то хак с паддингом (гуглится и используется в моем примере). Так что высота вам в любом случае лишняя.

А вместо миксина css функция clamp.

[sofer233]

Ankhena, Спасибо, но не подходит, нужно что бы динамически изменялась высота и ширина как отдельные переменные

[Ankhena]

sofer233, тогда нужно рассказать всю задачу.
И зачем они отдельные, если это круг и они равны?

Собственно, clamp в vw и ставит размер в зависимость от ширины вьюпорта и задает мин и макс значения.

[sofer233]

Смог сам решить, немного по колхозному, но вроде работает, если кто-то предложит более элегантное решения, буду благодарен !

$maxWidth: 1920;

@mixin adaptiv($pcSize, $mobSize) {
 $addSize: $pcSize - $mobSize;
 $maxWidth: $maxWidth - 320;
 $width: calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth}));
 width:$width;
 height:$width;
}

[sofer233]

Ankhena, Если в проекте используется много кругов с разным контендом внутри круга и разными размерами, то не совсем удобно

[Ankhena]

sofer233,

Если в проекте используется много кругов с разным контендом внутри круга и разными размерами, то не совсем удобно

Ну вот для этого и используют aspect-ratio, а не городят миксины.

[sofer233]

Ankhena, Ну, кому как удобнее. Я оптимизирую почти готовый проект, там используется высота и ширина в px и media запросы, как вы понимаете, это всё не очень плавно работает, ваш метод, определенно хорош, не спорю. Но переписывать под это версту, считаю не очень оправданно

[Ankhena]

sofer233, ладно, с шириной вы справились.
Высота равна ширине. На этом проблемы вроде заканчиваются.