在这里使用此方法：https://css-tricks.com/fun-viewport-units/
我想计算如何在视图端口大小1920px 和 375px之间实现特定的更改量
示例：我希望我的 150px 元素在 1920px 和 375px 之间缩小 40px
问题是：
我不知道我应该使用什么方程来最好地定义我的输入值。
我试着在 1920px 添加 40px 除以 19.2（2.083 vw）减去 40px 的所需大小 150px：
width: calc(150px + (2.083vw - 40px))
它非常接近，但不是很接近，只是150px 在 1920px，但117px 在 375px。
我也尝试使用 40px 除以视口大小 15.45 之间的差异：
width: calc(150px + (2.588vw - 40px))
但这是更远的160px 在 1920px和119px 在 375px：
零件解决方案:
如果我用元素boxfix看到的数字是正确的（或关闭 eneough 不关心半 px 每种方式）
width: calc(150px + (2.56vw - 49.5px))
因为我不想每次我希望有一种方法来计算每个值应该更准确，或者如果有一个更好的总和，我可以使用来实现同样的事情。
JS 小提琴：
这是一个 JSFiddle，以防它有用：https://jsfiddle.net/8qdptyj3/1/
body {
font-size: 18px;
}
.box {
width: calc(150px + (2.083vw - 40px))
}
.boxfix {
width: calc(150px + (2.56vw - 49.5px))
}<div cl="box" style="background:red;color:white;margin:10px;">
Hello World
</div>
<div cl="boxfix" style="background:red;color:white;margin:10px;">
Hello World
</div>
1
您需要求解方程Y = A*X + B，其中Y是宽度，X是100vw所以width: calc(A*100vw + B)
当100vw = 1920px你需要width: 150px，所以我们有
150px = A*1920px + B
当100vw = 375px你需要width: 110px，所以我们有
110px = A*375px + B
我们做一些数算，得到A = 0.026和B = 100.3
width:calc(0.026*100vw + 100.3px)Alsowidth:calc(2.6vw + 100.3px)
你也可以把它写成
--a: ((150 - 110)/(1920 - 375));
--b: 150px - 1920px*var(--a); /* OR 110px - 375px*var(--a) */
width: calc(var(--a)*100vw + var(--b));
body {
font-size: 18px;
}
.box {
width: calc(2.6vw + 100.3px);
height: 100px;
}
.box-alt {
--a: ((150 - 110)/(1920 - 375));
--b: 150px - 1920px*var(--a);
width: calc(var(--a)*100vw + var(--b));
height: 100px;
}<div cl="box" style="background:red;color:white;margin:10px;">
</div>
<div cl="box-alt" style="background:red;color:white;margin:10px;">
</div>本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处
评论列表（18条）