使用 calc(px + vw) 使用 CSS 计算流体 CSS 元素大小

Question

在这里使用这个方法：https://css-tricks.com/fun-viewport-units/

我想计算如何在视口大小 1920px 和 375px

之间实现特定的变化量

示例： 我希望我的 150px 元素在 1920px 和 375px 之间缩小 40px

问题：

我不确定应该使用什么方程来最好地定义我的输入值。

我尝试在 1920px 处采用所需的 150px 大小加上 40px 除以 19.2 (2.083vw) 减去 40px:

width: calc(150px + (2.083vw - 40px))

非常接近，但还差得远，在 1920px 处接近 150px，但在 375px.[=19= 处接近 117px ]

我还尝试使用 40px 除以视口大小 15.45 之间的差异：

width: calc(150px + (2.588vw - 40px))

但距离 160px at 1920px 和 119px at 375px:

部分解决方案：

如果我 fiddle 元素 boxfix 中看到的数字是正确的（或者足够接近而不关心每个方向的半像素）

width: calc(150px + (2.56vw - 49.5px))

因为我不想每次都fiddle这些数字，我希望有一种方法可以更准确地计算每个值应该是多少，或者如果有更好的总和我可以用来实现同样的事情。

JS Fiddle:

这里有一个 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 class="box" style="background:red;color:white;margin:10px;">
  Hello World
</div>
<div class="boxfix" style="background:red;color:white;margin:10px;">
  Hello World
</div>

Answer 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) 还有 width: 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 class="box" style="background:red;color:white;margin:10px;">

</div>

<div class="box-alt" style="background:red;color:white;margin:10px;">

</div>