Question

在这里使用此方法：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 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>

1

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

Your code iswidth: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 class="box" style="background:red;color:white;margin:10px;">
</div>
<div class="box-alt" style="background:red;color:white;margin:10px;">
</div>

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

问题是：

零件解决方案:

JS 小提琴：

发表评论

评论列表（11条）

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

问题是：

零件解决方案:

JS 小提琴：

相关推荐

发表评论

评论列表（11条）