Как избежать отрицательных значений из функции css calc?

#html #css #css-calc

#HTML #css #css-calc

Вопрос:

Я использую функцию css calc из css-tricks

 calc([minimum size]   ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

Я использую функцию calc следующим образом

 margin-top: calc(270px   (0 - 270) * (100vw - 320px) / (900 - 320));

Это работает, и у margin-right меня 270 пикселей при ширине окна просмотра 320 пикселей и 0 пикселей при ширине окна просмотра 900 пикселей.
Но когда я изменяю размер своего окна больше 900px , значение margin-right становится отрицательным.

Я могу использовать медиа-запросы, но есть ли другое решение CSS? Могу ли я объединить эти функции calc с min() max() или clamp() , чтобы избежать отрицательных значений?

Редактировать

я нашел возможное решение. Он работает max() таким образом

 margin-right: max(0vw, calc(270px   (0 - 270) * ((100vw - 320px) / (900 - 320))))

1. почему бы вам не настроить его с помощью media query для настройки вашего вычисления?

2. @MaxiGui я хочу использовать в своем проекте как можно меньше медиазапросов, и меня разрывает на части необходимость идеально сочетать функции css, если это возможно, чтобы в некоторых случаях вы могли обойтись, например, без медиазапросов.

Ответ №1:

для всех, кому интересно. В итоге я получил эти правила css.

если ваше минимальное значение отрицательное, вам нужна min() такая функция css

 margin-right: min(0vw, calc(-270px   (0 - -270) * ((100vw - 320px) / (900 - 320))))

если ваше минимальное значение положительное, вам нужна max() такая функция css

 margin-right: max(0vw, calc(270px   (0 - 270) * ((100vw - 320px) / (900 - 320))))