Html 如何在css calc中处理负值和百分比值？（流体设计）

我发现这个很棒的css

calc（[最小尺寸]+（[最大尺寸]-[最小尺寸]）*（（100vw-[最小视口宽度]/（[最大视口宽度]-[最小视口宽度]））；

我尝试将此计算函数像这样用于

margin right

margin right:calc（-20%+（0--20）*（（100vw-320px）/（1600-320））；

我希望实现以下目标：

-20% at 320px viewport width
0% at 1600px viewport width

css calc函数可以完美地处理正值，但显然不能处理负值。如何更改calc函数以处理百分比和负值

我试过这个

margin right:calc（-20%+（0%--20%）*（（100vw-320px）/（1600-320））；

但这是无效的

背景

我使用这个js函数来计算范围

function\u translateRange(
输入，
inputMin，
输入最大值，
outputMin，
输出最大值
) {
设inputMinA=Math.min（inputMin，input）；
设inputMaxA=Math.max（inputMax，input）；
返回(
输出分钟+
（（输出最大值-输出最小值）*（输入-输入最小值））/
（inputMaxA-inputMinA）
);
};

像这样

translateRange（window.innerWidth，3201400，-45%，0%）

我想将此函数转换为css calc函数。为什么？为什么我不使用js函数来计算

右边距

？因为我想在我的应用程序中尽可能不使用js

注意：这种灵活性对我来说尤其重要，因为我还希望处理尽可能少的媒体查询

编辑

---

我重新构造了css代码。我配置了我的绝对元素，这样我就可以在0开始和结束时使用正的px值。因此，通过这种方式，css calc函数可以像我所说的那样工作。

（0%--20%）

是一个百分比大小，

（（100vw-320px）/（1600-320））

是一个px大小。你不能把它们相乘。在

calc

中乘法不能两手都有单位。你计算（0%--20%），我想这是错误的。您可以将公式缩短为calc（-40%*（（100vw-320px）/（1600-320））@Raqha谢谢，但这也不能很好地展示您的实际用例，因为我相信解决方案比您想象的简单得多