如何处理CSS Calc中的负值和百分比值？ 流体设计 编辑

问题描述

我发现了这个很棒的CSS calc function from css-tricks

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

我尝试将这种calc函数用于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 _translaterange(
    input,inputMin,inputMax,outputMin,outputMax
) {
    let inputMinA = Math.min(inputMin,input);
    let inputMaxA = Math.max(inputMax,input);

    return (
        outputMin +
        ((outputMax - outputMin) * (input - inputMinA)) /
            (inputMaxA - inputMinA)
    );
};

像这样

translaterange(window.innerWidth,320,1400,-45%,0%)

我想将此函数转换为css calc函数。为什么？为什么不使用js函数来计算margin-right？因为我想在我的应用程序中尽可能地减少js。

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

编辑

我重组了CSS代码。我配置了我的绝对元素，因此我可以在0的开头和结尾使用正px值。这样，css calc函数就可以按照我的方式工作。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）