如何解决如何处理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 举报,一经查实,本站将立刻删除。