减少仅在CSS缩小时减去的距离％

Question

例如，我的中心元素为margin-top: -10%;

我想调整大小，更多的窗口缩小到％变得更少（如-6％）。

我知道 vw 和 vh ，但是如果我们之间的距离很小，则在调整窗口大小时它们几乎不会改变。

是否有办法margin-top: calc();或*做一些怪异的数学技巧来实现我的意思？

Answer 1

对于宽窗口，我添加了媒体查询。 我以1300px为例。如果将窗口大小调整为大于1300px，则边距将保持不变。

当窗口开始缩小到1300px以下时，边距开始发生根本变化。通过以下计算，我实现了这一点：

margin-top: calc(-30px + 1300px - 100vw);

如您所见，在1300像素处，边距将与它更大时的边距完全相同，并且将使用媒体查询，因为

• 我减去了原始保证金，
• 然后我添加了断点宽度（= 1300px）
• 然后减去那一刻完全相同的窗口宽度（= 1300像素）。

因此，基本上，我们将其用作“起点”。 从那时起，窗口缩小得越多，边距在正方向上的作用就越大。，因为缩小宽度在公式中为负。 （意味着，随着窗口的缩小，我们越来越少地求和。）

---

在这里玩玩以达到自己的理想数字：

https://codepen.io/bradib0y/pen/xyzJYE